小程序实现简单列表功能
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了小程序实现简单列表功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序实现简单列表功能的具体代码，供大家参考，具体内容如下
列表组件 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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。