微信小程序使用for循环动态渲染页面操作示例

2020-03-21 16:04:21

字体：大中小

来源：转载

供稿：网友

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

先来看看运行效果：

微信小程序,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: "浙江"      }    ]  },

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

上一篇：微信小程序开发问题之wx.previewImage

下一篇：微信小程序之swiper滑动面板用法示例