Mini Program to Implement Simple List Function

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:

Detailed example of implementing list refresh in WeChat applet
WeChat applet implements city list selection
Implementation of pull-up loading and pull-down refreshing of WeChat applet list
Example code for implementing the WeChat applet drop-down list
WeChat applet implements adding click style examples to the circular list
WeChat applet scroll-view component implements list page example code
WeChat Mini Program (VI): Example of pull-up to load and pull-down to refresh a list
WeChat applet page jump function: how to jump from the list item to the next page
WeChat applet implements pull-down refresh and pull-up loading of list
WeChat applet implements infinite scrolling list

<<: How to install and configure MySQL 8.0.12 decompressed version under Windows 10 with graphic tutorials

>>: Solution to the problem that a Linux modification of MySQL configuration does not take effect