11.1 渲染轮播图

data 中声明一个 banners 属性，用来存储服务器端轮播图的数据。

    data: {banners:[] // 轮播图的数据},/*** 生命周期函数--监听页面加载*/ async onLoad(options) {let bannerListData = await request("banner");this.setData({banners: bannerListData.banners})},

wx:for 的使用，让其循环渲染。

    <swiper class="index-swiper" indicator-dots indicator-color='ivory' indicator-active-color='#d43c33' autoplay><swiper-item wx:for="{{banners}}" wx:for-item="banner"><image src="{{banner.pic}}"></image></swiper-item></swiper>

提高渲染性能的方法① 使用 wx:key

就是说你在设计之初的整个数据里，有没有唯一的标识。比如说唯一的字符串或者数字。如果有的话，可以让它作为索引而存在。这样就提高效率了。我们 banners 里面确实有一个唯一值，那就是 bannerId。

    <!-- 轮播图区域--><swiper class="index-swiper" indicator-dots indicator-color='ivory'  indicator-active-color='#d43c33' autoplay><swiper-item wx:for="{{banners}}" wx:for-item="banner" wx:key="bannerId"><image src="{{banner.pic}}"></image></swiper-item></swiper>

11.2 渲染推荐歌曲

拿到推荐歌单的数据

 data: {banners:[], // 轮播图的数据recommendList: [] // 推荐歌单},/*** 生命周期函数--监听页面加载*/ async onLoad(options) {let bannerListData = await request("banner");let recommendListData = await request("personalized",{limit:10});this.setData({banners: bannerListData.banners,recommendList: recommendListData.result})},

看到这个 id，我们就知道了。它是一个唯一标识。可以用 wx:key 来优化性能。

wx:for 渲染

<!--    内容区--><scroll-view class="recommendScroll" enable-flex="true" scroll-x="true"><view class="scrollItem" wx:for="{{recommendList}}" wx:for-item="recommend"wx:key="id"><image src="{{recommend.picUrl}}"></image><text>{{recommend.name}}</text></view></scroll-view>

微信小程序 11 渲染轮播图和推荐歌曲相关推荐

php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序实现3D轮播图
在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重 ...
微信小程序开发 | 02 - 轮播图实现（swiper组件）
一.实现思路轮播图基于微信小程序提供的swiper组件(文档)实现. swiper组件中使用到下列属性: display-multiple-items:同时显示的滑块数量 current:当前所在滑 ...
微信小程序之swiper轮播图
微信小程序,一个不是app胜似app的开发工具,更加准确的说是开发途径,给非专业开发app的同学们提供了一个绝妙的选择轮播图几乎是每一个网站.app必有得一个展示区,用于醒目自己的特点.特色.了解微 ...
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...

微信小程序 11 渲染轮播图和推荐歌曲

11.1 渲染轮播图

11.2 渲染推荐歌曲

微信小程序 11 渲染轮播图和推荐歌曲相关推荐

最新文章

热门文章