快捷導(dǎo)航

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

更新時(shí)間：2018年12月25日 11:36:30 作者：進(jìn)階的碼農(nóng)

這篇文章主要介紹了微信小程序使用for循環(huán)動(dòng)態(tài)渲染頁(yè)面操作,結(jié)合實(shí)例形式分析了微信小程序使用for語(yǔ)句獲取data數(shù)據(jù)渲染頁(yè)面相關(guān)操作技巧,需要的朋友可以參考下

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

先來(lái)看看運(yùn)行效果：

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

其實(shí)也很簡(jiǎ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: "浙江"
      }
    ]
  },

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

您可能感興趣的文章:

相關(guān)文章

優(yōu)化 JavaScript 代碼的方法小結(jié)
客戶端腳本能讓你的應(yīng)用更加地動(dòng)態(tài)和活躍，但是瀏覽器對(duì)代碼的解析可能造成效率問題，而這種性能差異在客戶端之間也不盡相同。這里我們討論和給出一些優(yōu)化你的 JavaScript 代碼的提示和最佳實(shí)踐。
2009-07-07
JavaScript采用遞歸算法計(jì)算階乘實(shí)例
這篇文章主要介紹了JavaScript采用遞歸算法計(jì)算階乘,簡(jiǎn)單分析了javascript遞歸算法的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
js瀏覽器html5表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js瀏覽器html5表單驗(yàn)證,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
layui 實(shí)現(xiàn)自動(dòng)選擇radio單選框(checked)的方法
今天小編就為大家分享一篇layui 實(shí)現(xiàn)自動(dòng)選擇radio單選框(checked)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2019-09-09
JS異步錯(cuò)誤捕獲的一些事小結(jié)
這篇文章主要給大家介紹了關(guān)于JS異步錯(cuò)誤捕獲的一些事，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Ionic如何實(shí)現(xiàn)下拉刷新與上拉加載功能
在日常項(xiàng)目開發(fā)中我們經(jīng)常見到下拉刷新上拉加載的功能，接下來(lái)通過本文給大家介紹ionic如何實(shí)現(xiàn)下拉刷新與上拉加載的相關(guān)資料,需要的朋友可以參考下
2016-06-06
JavaScript聲明變量的這四兄弟(var、let、function、const)
這篇文章主要介紹了JavaScript聲明變量的這四兄弟，主要就是介紹var、let、function、const區(qū)別,需要的朋友可以參考下
2023-02-02
JavaScript?ES6中class定義類實(shí)例方法
ES6提供了更接近面向?qū)ο?注意:javascript本質(zhì)上是基于對(duì)象的語(yǔ)言)語(yǔ)言的寫法,引入了Class(類)這個(gè)概念,作為對(duì)象的模板,下面這篇文章主要給大家介紹了關(guān)于JavaScript?ES6中class定義類的相關(guān)資料,需要的朋友可以參考下
2022-07-07
淺談JavaScript的事件
事件是可以被 JavaScript 偵測(cè)到的行為。網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)的事件。比方說(shuō)，我們可以在用戶點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè) onClick 事件來(lái)觸發(fā)某個(gè)函數(shù)。事件在 HTML 頁(yè)面中定義。
2015-02-02
js實(shí)現(xiàn)適用于素材網(wǎng)站的黑色多級(jí)菜單導(dǎo)航條效果
這篇文章主要介紹了js實(shí)現(xiàn)適用于素材網(wǎng)站的黑色多級(jí)菜單導(dǎo)航條效果,涉及javascript鼠標(biāo)事件及頁(yè)面元素樣式的動(dòng)態(tài)切換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08