QQ小程序内测上线_微信小程序使用for循环动态烘托页面操作示例

微信小程序使用for循环动态渲染页面操作示例       这篇文章主要介绍了微信小程序使用for循环动态渲染页面操作,结合实例形式分析了微信小程序使用for语句获取data数据渲染页面相关操作技巧,需要的朋友可以参考下

本文实例讲述了微信小程序使用for循环动态渲染页面操作。分享给大家供大家参考,具体如下:

先来看看运行效果:

这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了

其实也很简单,我就直接上代码了

wxml部分:

 view wx:for='{{languageList}}' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select' 
 text {{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: "浙江"

希望本文所述对大家微信小程序开发有所帮助。


相关阅读