本文实例为大家分享了小程序实现简单列表功能的具体代码,供大家参考,具体内容如下
列表组件 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'>收藏:{{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 */ -webkit-justify-content: initial; /* Safari 6.1+ */ display: flex; justify-content: initial; } .leftimagecss{ margin-left: 5px; margin-top: 5px; margin-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%; margin-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-content: space-between; } .playcunnter{ font-size:small; -webkit-text-fill-color: blueviolet; } .time{ margin-right: 10px; font-size:small; -webkit-text-fill-color: lawngreen; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/212413/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)