This article example shares the specific code of the applet to implement a simple list function for your reference. The specific content is as follows List component for As long as you add an array to the component, you can implement the list component wxml code <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'>【Night Listening】{{item.title}}</text> <text class='nicenamecss'>{{item.nickname}}</text> <view class='timecss'> <text class='playcunnter'>Play times:{{item.playtimes}}</text> <text class='time'>Collection:{{item.likes}}</text> </view> </view> </view> </block> index.js code Page({ data: { yetinglist:[], } //List click event readDetail: function(e) { //Jump to other pages wx.navigateTo({ url: '../twoVC/twovc?id='+e.currentTarget.dataset.id }) // console.log(e.currentTarget.dataset.id); }, //Loading a page is called once onLoad: function () { var that =this; //Network parsing 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 code .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; } The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
>>: Solution to the problem that a Linux modification of MySQL configuration does not take effect
<br />This article will briefly introduce yo...
Preface When creating a primary and foreign key f...
The meaning of key_len In MySQL, you can use expl...
1. Install openssh-server yum install -y openssl ...
One environment Alibaba Cloud Server: CentOS 7.4 ...
Table of contents Preface Fix infinite loop in fo...
Assuming business: View the salary information of...
MySql uses joined table queries, which may be dif...
Table of contents 1. Preprocessing 2. Pretreatmen...
Table of contents Preface Create a Vite project R...
Table of contents 2. Stack analysis using pt-pmap...
Purpose: 1. In order to map the server's exte...
What I have been learning recently involves knowl...
Table of contents Canvas related documents Effect...
1. Requirements When using the Vue.js framework t...