文章目錄

• 小程序項目
• • app.json
  • pages/index/index.wxml
  • pages/index/index.wxss
  • pages/index/index.js
  • 小結
• 相關鏈接

小程序項目

代碼涉及的主要文件有：

app.json

pages/index/index.wxml

pages/index/index.wxss

pages/index/index.js

app.json

{"pages": ["pages/index/index"],"window": {"navigationBarBackgroundColor": "#971a22","navigationBarTitleText": "首頁","navigationBarTextStyle": "white"},"style": "v2","sitemapLocation": "sitemap.json" }

pages/index/index.wxml

<view class="container"><swiper class="bannerContainer" autoplay indicator-dots indicator-color="#971a22" indicator-active-color="ivory"><swiper-item wx:for="{{bannerList}}" wx:key="id"><image src="{{item.pic}}"></image></swiper-item></swiper><scroll-view class="recommendList" enable-flex scroll-x><view class="recommendItem" wx:for="{{recommendList}}" wx:key="id"><image src="{{item.picUrl}}"></image><view class="title">{{item.title}}</view></view></scroll-view> </view>

pages/index/index.wxss

.bannerContainer image{width: 100%;height: 300rpx; } .recommendList{display: flex;padding: 20rpx; } .recommendList image{width: 200rpx;height: 200rpx;border-radius: 10rpx;margin-right: 10rpx; } .recommendList .title{font-size: 26rpx;display: -webkit-box;overflow: hidden;text-overflow:ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2; }

pages/index/index.js

Page({data:{bannerList:[],recommendList:[]},onLoad(){this.getBannerList();this.getRecommendList();},getBannerList(){const result = [{pic: "http://p1.music.126.net/N-7H0QxkjcnqNfQo7Prx9g==/109951167582698387.jpg", id: 146917329},{pic: "http://p1.music.126.net/CRkjYtGzVn927GVZFNcykQ==/109951167582707134.jpg", id: 146972047},{pic: "http://p1.music.126.net/UCpvQwegTjx-_ecHDDrViQ==/109951167583920308.jpg", id: 1958588078},{pic: "http://p1.music.126.net/5hxwliN1A-ocfo1y8Rl-LA==/109951167583325800.jpg", id: 146939174},{pic: "http://p1.music.126.net/i9A9PG9tvDqkuRekCR8EgQ==/109951167583029047.jpg", id: 1957532468},{pic: "http://p1.music.126.net/es8XZbDQWrNjA_VyW7XJeQ==/109951167583025966.jpg", id: 146848766},{pic: "http://p1.music.126.net/7YCWTLNpIqzdaYD_WrB6qA==/109951167583039220.jpg", id: 146627102},{pic: "http://p1.music.126.net/u2Y1A90S5fh3R4qVhKrIGQ==/109951167582728056.jpg", id: 223052482},{pic: "http://p1.music.126.net/Jn1zsklqb_qmPfoJsooJ2Q==/109951167582726188.jpg", id: 1957961053},{pic: "http://p1.music.126.net/lsKgZUDW-4C8SRbQciZvmA==/109951167583045066.jpg", id: 1955958008}]this.setData({bannerList:result})},getRecommendList(){const result = [{id: 494479726, picUrl: "https://p2.music.126.net/58ox3zVEmosSrdLaKj6x5w==/109951162827155600.jpg", title: "后搖MV | 原來后搖也能視覺化"},{id: 135595185, picUrl: "https://p2.music.126.net/11ZHf0G9FQzWNi-8sFzCmw==/109951164541050373.jpg", title: "Acid Jazz酸爵士—爵士樂中的“酸性”融合"},{id: 114846926, picUrl: "https://p2.music.126.net/GTf1b1G2dAs1SleurIfcJg==/3399689953594431.jpg", title: "歌名后綴大科普"},{id: 113780871, picUrl: "https://p2.music.126.net/qxUWSKhrd1UWME8oAYTMFQ==/109951164497486331.jpg", title: "「Cool Jazz」冷爵士讓你全身心放松"},{id: 2962407224, picUrl: "https://p2.music.126.net/NW1GEN3sruiLpT4AZrdDFw==/109951165669533032.jpg", title: "『英倫女聲』遺世而獨立的不列顛玫瑰"},{id: 2107922801, picUrl: "https://p2.music.126.net/b--QkIcFfdxz_DryW55ZfA==/109951163165101034.jpg", title: "聲光美學 I 經典電影中的古典配樂集"},{id: 78669437, picUrl: "https://p2.music.126.net/AfN_yyi-fQe8POTMKJFjAA==/7957165650297535.jpg", title: "美劇中的神級插曲"},{id: 3116763088, picUrl: "https://p2.music.126.net/MSom1XSXqt5K9ArZlJ29CQ==/109951164608648583.jpg", title: "音樂的力量 I 文藝復興時期的世俗情歌"},{id: 101354498, picUrl: "https://p2.music.126.net/dmj9iqz8MsD_sCd1xBF0WA==/7918682744429845.jpg", title: "時尚運動?必備節奏"},{id: 739403485, picUrl: "https://p2.music.126.net/RPilW2ADtU91CK3qkVPizA==/18720284976441185.jpg", title: "弦外有聲——活力小提琴"}]this.setData({recommendList:result})} })

小結

記住四個指令就行：

wx:for，綁定一個數組。

wx:key。唯一的字符串或數值。要么是數組元素item的某個屬性，要么是*this（此時，item本身是一個唯一的字符串或數值）。

wx:for-item。默認數組當前元素的變量名為item，可以使用wx:for-item重新指定當前元素的變量名。

wx:for-index。默認數組當前元素的下標變量名為index，可以使用wx:for-index重新指定當前元素的下標變量名。

相關鏈接

【微信小程序】wxml模板

總結

以上是生活随笔為你收集整理的微信小程序中的列表渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。