本文实例讲述了微信小程序使用for循环动态渲染页面操作。分享给大家供大家参考,具体如下:
先来看看运行效果:
这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了
其实也很简单,我就直接上代码了
wxml部分:
<view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'> <text class='yuzhong'>{{item.name}}</text> </view>
wxss部分:
.select { height: 80rpx; width: 90%; margin: 0 auto; border-bottom: 1px dashed #5e5e62; color: #fff; font-size: 32rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 10rpx; box-sizing: border-box; } .hua { height: 80rpx; border-bottom: 1px dashed #5e5e62; width: 90%; margin: 0 auto; padding-left: 10rpx; box-sizing: border-box; } .yuzhong { color: #fff; font-size: 32rpx; line-height: 80rpx; }
js部分:
data: { bg:"../../images/other_bg.png", language:'', isFlag:false, cid:'', // languageList:{}, languageList:[ { id:0, name:"菏泽" }, { id: 1, name: "东北" }, { id: 2, name: "北京" }, { id: 3, name: "浙江" } ] },
希望本文所述对大家微信小程序开发有所帮助。
本文向大家介绍微信小程序中页面FOR循环和嵌套循环,包括了微信小程序中页面FOR循环和嵌套循环的使用技巧和注意事项,需要的朋友参考一下 微信小程序中页面FOR循环和嵌套循环 单个循环 嵌套循环 如果缺少 wx:key 页面在调试下可以看到黄色警告信息 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
本文向大家介绍微信小程序 for 循环详解,包括了微信小程序 for 循环详解的使用技巧和注意事项,需要的朋友参考一下 1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: 可以使用wx:for-item指定数组当前元素的变量名 可以使用wx
本文向大家介绍微信小程序模版渲染详解,包括了微信小程序模版渲染详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序的界面程序支持html语法,多加了一部分标签,如view、block、templete等。 模版渲染 index.wxml 其中{{}}里面包含的内容你可以理解为一个变量,怎么让程序解析出{{helloWord}}变量 在index.js 中注册这个变量 然后我们运行小程序,就可以
本文向大家介绍微信小程序 条件渲染详解,包括了微信小程序 条件渲染详解的使用技巧和注意事项,需要的朋友参考一下 1,wx.if 在微信小程序中,小程序是使用wx.if="{{条件}}"来判断是否渲染该代码块,用法如下: <view wx.if="{{条件}}">True</view> 也可以用wx.elif和wx.else来添加一个else块,事例如下: <view wx:if="{{a>1}}"
本文向大家介绍微信小程序 教程之列表渲染,包括了微信小程序 教程之列表渲染的使用技巧和注意事项,需要的朋友参考一下 系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:for 在组件上使用wx:for控制属性绑定一个数组,
本文向大家介绍微信小程序 教程之条件渲染,包括了微信小程序 教程之条件渲染的使用技巧和注意事项,需要的朋友参考一下 系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:if 在MINA中,我们用wx:if="{{condi