Mini Program to Implement Simple List Function

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

Recommend

XHTML tutorial, a brief introduction to the basics of XHTML

<br />This article will briefly introduce yo...

How to calculate the value of ken_len in MySQL query plan

The meaning of key_len In MySQL, you can use expl...

Install and configure ssh in CentOS7

1. Install openssh-server yum install -y openssl ...

Tutorial on installing JDK Tomcat MySQL on Linux (remote access using Mac)

One environment Alibaba Cloud Server: CentOS 7.4 ...

Detailed explanation of how to detect and prevent JavaScript infinite loops

Table of contents Preface Fix infinite loop in fo...

Summary of three ways to implement ranking in MySQL without using order by

Assuming business: View the salary information of...

A simple example of MySQL joint table query

MySql uses joined table queries, which may be dif...

Specific use of Mysql prepare preprocessing

Table of contents 1. Preprocessing 2. Pretreatmen...

How to build a React project with Vite

Table of contents Preface Create a Vite project R...

A performance bug about MySQL partition tables

Table of contents 2. Stack analysis using pt-pmap...

MySQL 8.0.15 installation and configuration tutorial under Win10

What I have been learning recently involves knowl...

Vue uses Canvas to generate random sized and non-overlapping circles

Table of contents Canvas related documents Effect...

How to encapsulate axios in Vue project (unified management of http requests)

1. Requirements When using the Vue.js framework t...