欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序使用for循環(huán)動態(tài)渲染頁面操作示例

 更新時間：2018年12月25日 11:36:30   作者：進階的碼農(nóng)  
這篇文章主要介紹了微信小程序使用for循環(huán)動態(tài)渲染頁面操作,結(jié)合實例形式分析了微信小程序使用for語句獲取data數(shù)據(jù)渲染頁面相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了微信小程序使用for循環(huán)動態(tài)渲染頁面操作。分享給大家供大家參考，具體如下：

先來看看運行效果：

這種列表效果可以說是最常見的一種，肯定不是我們一個一個寫上去，這就用到了我們這次要說的for循環(huán)渲染了

其實也很簡單，我就直接上代碼了

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: "浙江"
      }
    ]
  },

希望本文所述對大家微信小程序開發(fā)有所幫助。

相關(guān)文章

最新評論