List rendering in wechat applet

Applet project

The main files involved in the code are ：

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. pages/index/index.js

app.json

{
    
  "pages": [
    "pages/index/index"
  ],
  "window": {
    
    "navigationBarBackgroundColor": "#971a22",
    "navigationBarTitleText": " home page ",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.wxml

<view class="container">
  <swiper class="bannerContainer" autoplay indicator-dots indicator-color="#971a22" indicator-active-color="ivory">
    <swiper-item wx:for="{
     {bannerList}}" wx:key="id">
      <image src="{
     {item.pic}}"></image>
    </swiper-item>
  </swiper>
  <scroll-view class="recommendList" enable-flex scroll-x>
    <view class="recommendItem" wx:for="{
     {recommendList}}" wx:key="id">
      <image src="{
     {item.picUrl}}"></image>
      <view class="title">{
   {item.title}}</view>
    </view>
  </scroll-view>
</view>

pages/index/index.wxss

.bannerContainer image{
    
  width: 100%;
  height: 300rpx;
}
.recommendList{
    
  display: flex;
  padding: 20rpx;
}
.recommendList image{
    
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
}
.recommendList .title{
    
  font-size: 26rpx;
  display: -webkit-box;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

pages/index/index.js

Page({
    
  data:{
    
    bannerList:[],
    recommendList:[]
  },
  onLoad(){
    
    this.getBannerList();
    this.getRecommendList();
  },
  getBannerList(){
    
    const result = [
      {
    pic: "http://p1.music.126.net/N-7H0QxkjcnqNfQo7Prx9g==/109951167582698387.jpg", id: 146917329},
      {
    pic: "http://p1.music.126.net/CRkjYtGzVn927GVZFNcykQ==/109951167582707134.jpg", id: 146972047},
      {
    pic: "http://p1.music.126.net/UCpvQwegTjx-_ecHDDrViQ==/109951167583920308.jpg", id: 1958588078},
      {
    pic: "http://p1.music.126.net/5hxwliN1A-ocfo1y8Rl-LA==/109951167583325800.jpg", id: 146939174},
      {
    pic: "http://p1.music.126.net/i9A9PG9tvDqkuRekCR8EgQ==/109951167583029047.jpg", id: 1957532468},
      {
    pic: "http://p1.music.126.net/es8XZbDQWrNjA_VyW7XJeQ==/109951167583025966.jpg", id: 146848766},
      {
    pic: "http://p1.music.126.net/7YCWTLNpIqzdaYD_WrB6qA==/109951167583039220.jpg", id: 146627102},
      {
    pic: "http://p1.music.126.net/u2Y1A90S5fh3R4qVhKrIGQ==/109951167582728056.jpg", id: 223052482},
      {
    pic: "http://p1.music.126.net/Jn1zsklqb_qmPfoJsooJ2Q==/109951167582726188.jpg", id: 1957961053},
      {
    pic: "http://p1.music.126.net/lsKgZUDW-4C8SRbQciZvmA==/109951167583045066.jpg", id: 1955958008}
    ]
    this.setData({
    bannerList:result})
  },
  getRecommendList(){
    
    const result = [
      {
    id: 494479726, picUrl: "https://p2.music.126.net/58ox3zVEmosSrdLaKj6x5w==/109951162827155600.jpg", title: " Back shake MV |  It turns out that back shaking can also be visualized "},
      {
    id: 135595185, picUrl: "https://p2.music.126.net/11ZHf0G9FQzWNi-8sFzCmw==/109951164541050373.jpg", title: "Acid Jazz Acid jazz — In Jazz “ Acidic ” The fusion "},
      {
    id: 114846926, picUrl: "https://p2.music.126.net/GTf1b1G2dAs1SleurIfcJg==/3399689953594431.jpg", title: " The suffixes of song titles are popular science "},
      {
    id: 113780871, picUrl: "https://p2.music.126.net/qxUWSKhrd1UWME8oAYTMFQ==/109951164497486331.jpg", title: "「Cool Jazz」 Cold Jazz makes you relax "},
      {
    id: 2962407224, picUrl: "https://p2.music.126.net/NW1GEN3sruiLpT4AZrdDFw==/109951165669533032.jpg", title: "『 British female voice 』 The surviving and independent British rose "},
      {
    id: 2107922801, picUrl: "https://p2.music.126.net/b--QkIcFfdxz_DryW55ZfA==/109951163165101034.jpg", title: " Acoustooptic aesthetics  I  Classical soundtrack in classic movies "},
      {
    id: 78669437, picUrl: "https://p2.music.126.net/AfN_yyi-fQe8POTMKJFjAA==/7957165650297535.jpg", title: " Divine episode in American drama "},
      {
    id: 3116763088, picUrl: "https://p2.music.126.net/MSom1XSXqt5K9ArZlJ29CQ==/109951164608648583.jpg", title: " The power of music  I  Secular love songs of the Renaissance "},
      {
    id: 101354498, picUrl: "https://p2.music.126.net/dmj9iqz8MsD_sCd1xBF0WA==/7918682744429845.jpg", title: " Fashion sports • Essential rhythm "},
      {
    id: 739403485, picUrl: "https://p2.music.126.net/RPilW2ADtU91CK3qkVPizA==/18720284976441185.jpg", title: " There is sound outside the strings —— Energetic violin "}
    ]
    this.setData({
    recommendList:result})
  }
})

Summary

Just remember four instructions ：

1. wx:for, Bind an array .
2. wx:key. A unique string or value . Or array elements item A property of , Or *this（ here ,item Itself is a unique string or value ）.
3. wx:for-item. The variable name of the current element of the default array is item, have access to wx:for-item Reassign the variable name of the current element .
4. wx:for-index. The subscript variable name of the current element of the default array is index, have access to wx:for-index Reassign the subscript variable name of the current element .

Related links

【 Wechat applet 】wxml Templates