微信小程序中的列表渲染

小程序项目

代码涉及的主要文件有:

  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": "首页",
    "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: "后摇MV | 原来后摇也能视觉化"},
      {id: 135595185, picUrl: "https://p2.music.126.net/11ZHf0G9FQzWNi-8sFzCmw==/109951164541050373.jpg", title: "Acid Jazz酸爵士—爵士乐中的“酸性”融合"},
      {id: 114846926, picUrl: "https://p2.music.126.net/GTf1b1G2dAs1SleurIfcJg==/3399689953594431.jpg", title: "歌名后缀大科普"},
      {id: 113780871, picUrl: "https://p2.music.126.net/qxUWSKhrd1UWME8oAYTMFQ==/109951164497486331.jpg", title: "「Cool Jazz」冷爵士让你全身心放松"},
      {id: 2962407224, picUrl: "https://p2.music.126.net/NW1GEN3sruiLpT4AZrdDFw==/109951165669533032.jpg", title: "『英伦女声』遗世而独立的不列颠玫瑰"},
      {id: 2107922801, picUrl: "https://p2.music.126.net/b--QkIcFfdxz_DryW55ZfA==/109951163165101034.jpg", title: "声光美学 I 经典电影中的古典配乐集"},
      {id: 78669437, picUrl: "https://p2.music.126.net/AfN_yyi-fQe8POTMKJFjAA==/7957165650297535.jpg", title: "美剧中的神级插曲"},
      {id: 3116763088, picUrl: "https://p2.music.126.net/MSom1XSXqt5K9ArZlJ29CQ==/109951164608648583.jpg", title: "音乐的力量 I 文艺复兴时期的世俗情歌"},
      {id: 101354498, picUrl: "https://p2.music.126.net/dmj9iqz8MsD_sCd1xBF0WA==/7918682744429845.jpg", title: "时尚运动•必备节奏"},
      {id: 739403485, picUrl: "https://p2.music.126.net/RPilW2ADtU91CK3qkVPizA==/18720284976441185.jpg", title: "弦外有声——活力小提琴"}
    ]
    this.setData({recommendList:result})
  }
})

小结

记住四个指令就行:

  1. wx:for,绑定一个数组。
  2. wx:key。唯一的字符串或数值。要么是数组元素item的某个属性,要么是*this(此时,item本身是一个唯一的字符串或数值)。
  3. wx:for-item。默认数组当前元素的变量名为item,可以使用wx:for-item重新指定当前元素的变量名。
  4. wx:for-index。默认数组当前元素的下标变量名为index,可以使用wx:for-index重新指定当前元素的下标变量名。

相关链接

【微信小程序】wxml模板

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序,可以使用 `scroll-view` 组件来展示长列表,并使用 `wx:for` 指令来渲染列表数据。具体步骤如下: 1. 在 `wxml` 文件,使用 `scroll-view` 组件包裹需要展示的列表内容,如下所示: ```html <scroll-view scroll-y="true"> <!-- 使用 wx:for 渲染列表数据 --> <view wx:for="{{list}}" wx:key="index">{{item}}</view> </scroll-view> ``` 2. 在对应的 `js` 文件,定义列表数据并传递给 `wxml` 文件,如下所示: ```javascript Page({ data: { list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] } }) ``` 其,`list` 数组的每个元素都会通过 `wx:for` 指令渲染为一个 `view` 组件。 3. 在 `scroll-view` 组件,设置 `scroll-y` 属性为 `true`,即可开启纵向滚动。 需要注意的是,当列表数据较多时,可能会影响小程序性能,此时可以考虑使用分页加载等优化策略。 ### 回答2: 微信小程序是一种轻量级的应用程序,在小程序框架,长列表渲染是一个常见的需求。由于小程序的页面渲染机制是异步的,无法一次性将大量的数据全部渲染到页面上。因此,对于大数据量的长列表渲染,我们可以采用分页加载或虚拟列表技术。 一种常见的长列表渲染方式是分页加载。我们可以将数据分割成若干页,每次只加载当前页的部分数据,当用户滚动到页面底部时,再加载下一页数据。这种方式在渲染大数据量时可以提高性能,并减少用户等待时间。 另一种常见的长列表渲染方式是虚拟列表。虚拟列表是一种只渲染可见区域的数据项的技术。当用户滚动列表时,只渲染当前可见区域的数据项,而不渲染所有数据。这种方式可以减少页面渲染的时间和内存的占用,提高性能和用户体验。 为了实现长列表渲染,我们可以使用小程序框架提供的组件或第三方库。例如,使用官方组件"scroll-view"可以实现分页加载和虚拟列表。我们可以设置上拉触底事件,当用户滚动到页面底部时,触发加载下一页的数据;同时,在"scroll-view"设置合适的高度和样式,来展示可见区域的数据项。此外,也可以使用第三方库如vant等来实现长列表渲染。 总的来说,微信小程序的长列表渲染可以通过分页加载或虚拟列表来实现,提高性能和用户体验。我们可以根据具体需求选择合适的方法,并利用小程序框架提供的组件或第三方库来简化开发过程。 ### 回答3: 微信小程序的长列表渲染通常使用的是WXML和WXSS来实现。在WXML,我们可以使用<scroll-view>组件来实现长列表的滚动效果。<scroll-view>组件具有scroll-view 和 scroll-y属性,通过设置scroll-y为true,可以实现竖向滚动。此外,我们还可以使用<view>组件来包裹列表的每一项,使用wx:for循环语法来遍历数据源,并在每一项显示对应的数据。 在WXSS,我们可以设置<scroll-view>组件的高度、宽度以及滚动条的样式等。使用WXSS可以对列表项进行样式设置,如设置字体颜色、背景色等。 在数据量较大的情况下,为了提高列表渲染的性能,我们可以使用<block>组件对列表进行分块渲染。将一个长列表分成多个块,通过分批加载,可以避免一次性渲染大量数据导致卡顿的情况发生。 此外,我们还可以使用小程序提供的scroll-into-view方法来实现对指定列表项的定位和滚动。 为了更好的用户体验,还可以在长列表添加上拉刷新和下拉加载更多的功能,这样用户可以在页面滚动到底部时自动加载更多数据,或者下拉列表时刷新数据,提高用户的浏览体验。 综上所述,微信小程序的长列表渲染主要通过scroll-view组件、wx:for循环语法、scroll-into-view方法以及上拉刷新和下拉加载等功能来实现。这些方法可以提高列表渲染的性能和用户体验,使用户能够流畅地浏览和操作长列表数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值