小程式實現簡單列表功能
阿新 • • 發佈:2021-05-18
本文例項為大家分享了小程式實現簡單列表功能的具體程式碼,供大家參考,具體內容如下
列表元件 for只要給元件增加for一個數組那麼就可以實現列表元件
wxml程式碼
<block wx:for="{{yetinglist}}"> <view class='waibian' bindtap="readDetail" data-id="{{item.title}}"> <image src="{{item.smallLogo}}" class='leftimagecss'></image> <view class='righttextcss'> <text class='titlecss'>【夜聽】{{item.title}}</text> <text class='nicenamecss'>{{item.nickname}}</text> <view class='timecss'> <text class='playcunnter'>播放次數:{{item.playtimes}}</text> <text class='time'&gncjUMKlt;收藏:{{item.likes}}</text> </view> </view> </view> </block>
index.js程式碼
Page({ data: { yetinglist:[],} //列表點選事件 readDetail: function(e) { //跳轉到其他頁面 wx.navigateTo({ url: '../twoVC/twovc?id='+e.currentTarget.dataset.id }) // console.log(e.currentTarget.dataset.id); },//載入頁面是呼叫之呼叫一次 onLoad: function () { var that =this; //網路解析 wx.request({ url:'http://mobile.ximalaya.com/mobile/v1/album/track/ts-1499312754612?albumId=260769&device=iPhone&isAsc=true&pageId=1&pageSize=20&',success:function(res) { console.log(res.data.data.list) that.setData({ yetinglist:res.data.data.list,}) } }) } })
wxxml程式碼
.waibian{ display: -webkit-flex; /* Safari */ http://www.cppcns.com -webkit-justify-content: initial; /* Safari 6.1+ */ display: flex; justify-content: initial; } .leftimagecss{ margin-left: 5px; margin-top: 5px; margncjUMKlin-bottom: 5px; width:40%; height:110px; border-radius:10px; } .righttextcss{ margin-left: 10px; height: 110px; width: 70%; flex-wrap: wrap; display: flex; align-content: Space-around; } .titlecss{ height: 40px; width: 100%; margihttp://www.cppcns.comn-top: 5px; font-size:medium; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .nicenamecss{ width: 100%; height: 30px; font-size:small; -webkit-text-fill-color: lightgray; } .timecss{ height: 20px; width: 100%; display: flex; justify-c程式設計客棧ontent: space-between; } .playcunnter{ font-size:small; -webkit-text-fill-color: blueviolet; } .time{ margin-right: 10px; font-size:small; -webkit-text-fill-color: lawngreen; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。