Rumah > applet WeChat > Pembangunan program mini > 微信小程序用户自定义模版的功能实现

微信小程序用户自定义模版的功能实现

小云云
Lepaskan: 2018-05-24 16:07:31
asal
3282 orang telah melayarinya

本文主要介绍微信小程序用户自定义模版用法,结合实例形式较为详细的分析了微信小程序自定义模板的定义、数据调用、布局设置等简单使用技巧,需要的朋友可以参考下。

1、新建一个wxml(为测试方便,这里将wxml文件建立在home目录下)

/home/home/botmenu.wxml:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<template name="bottommenu">

  <view class="bottomposition">

   <navigator class="item_info" url="../home/home">

     <image src="../img/sy.png"></image>

     <text>首页</text>

   </navigator>

   <navigator class="item_info" url="/pages/home/home">

     <image src="../img/xx.png"></image>

     <text>消息</text>

   </navigator>

   <navigator class="item_info" url="/pages/home/home">

     <image src="../img/lz.png"></image>

     <text>工具</text>

   </navigator>

   <navigator class="item_info" url="/pages/home/home">

     <image src="../img/wo.png"></image>

     <text>我</text>

   </navigator>

  </view>

</template>

Salin selepas log masuk

2、新建wxss

/home/home/botmenu.wxss:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

.bottomposition{

 width: 100%;

 height: 10%;

 position: fixed;

 overflow: hidden;

 left: 0;

 top: 90%;

z-index: 1100;

 display: flex;

 border-top: 1rpx solid #dadada;

}

.item_info {

 width: 25%;

 height: 100%;

 display: flex;

 align-items: center;

 flex-direction: column;

 justify-content: center;

}

.item_info image {

 width: 20px;

 height: 20px;

}

.item_info text {

 margin-top: 5px;

 font-size: 12px;

}

.infolist{

 margin:10px;

 padding: 0 10px;

 font-size: 12px;

}

Salin selepas log masuk

3、页面引用

1

2

3

4

<import src="../home/home.wxml"/>

<view class="info">

 <template is="bottommenu"></template>

</view>

Salin selepas log masuk

4、页面样式引用

1

@import "../home/home.wxss";

Salin selepas log masuk

5、index.js中的data数据:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

data: {

 tool_list:[{

  name:"在线JavaScript代码美化、格式化工具",

  url:"http://tools.jb51.net/code/js"

 },{

  name:"json代码在线格式化/美化/压缩/编辑/转换工具",

  url:"http://tools.jb51.net/code/jsoncodeformat"

 },{

  name:"中文繁体字简体字转换(繁简转换)工具",

  url:"http://tools.jb51.net/transcoding/convertzh"

 },{

  name:"正则表达式在线生成工具",

  url:"http://tools.jb51.net/regex/create_reg"

 },{

  name:"XML代码在线格式化美化工具",

  url:"http://tools.jb51.net/code/xmlcodeformat"

 },{

  name:"在线科学计算器",

  url:"http://tools.jb51.net/jisuanqi/jsqkexue"

 },{

  name:"BASE64编码解码工具",

  url:"http://tools.jb51.net/transcoding/base64"

 }]

 },

Salin selepas log masuk

6、index.wxml

1

2

3

4

5

6

7

8

9

<!--index.wxml-->

<view class="'userinfo'">脚本之家在线工具</view>

<view wx:for="{{tool_list}}" class="infolist">

 <text>{{item.name}} - {{item.url}}</text>

</view>

<import src="../home/home.wxml"/>

<view class="info">

 <template is="bottommenu"></template>

</view>

Salin selepas log masuk

以上内容就是微信小程序用户自定义模版的功能实现,希望能帮助到大家。

相关推荐:

微信小程序实现动态改变view标签宽度和高度的方法

微信小程序开发入门实例

微信小程序如何实现图片放大预览功能

Atas ialah kandungan terperinci 微信小程序用户自定义模版的功能实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan