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

11.1 渲染轮播图

---

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

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

2. 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 渲染推荐歌曲

1. 拿到推荐歌单的数据

 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 来优化性能。

2. 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>