微信小程序学习：（三）轮播图

谁借莪１个温暖的怀抱￠ 2021-12-04 00:37 288阅读 0赞

# 微信小程序学习：（三）轮播图 #

项目地址：[https://github.com/leoricding/-][https_github.com_leoricding_-]

### 我创建了lessions页面，用于展示轮播图及lession列表。 ###

## （一）本地数据localData.js ##

### 用于模拟远程数据，目录结构如下 ###

\#![在这里插入图片描述][20190719112559696.PNG]

let localData=[
      { 
        avatar:'../../data/images/avatar/00.jpg',
        carousel:'../../data/images/carousel/00.jpg',
      },
      { 
        avatar: '../../data/images/avatar/01.jpg',
        carousel: '../../data/images/carousel/01.jpg',
      },
      { 
        avatar: '../../data/images/avatar/02.jpg',
        carousel: '../../data/images/carousel/02.jpg',
      },
      { 
        avatar: '../../data/images/avatar/03.jpg',
        carousel: '../../data/images/carousel/03.jpg',
      },
      { 
        avatar: '../../data/images/avatar/04.jpg',
        carousel: '../../data/images/carousel/04.jpg',
      },
    ];
    
    module.exports = { localData};

## （2）获取本地数据lession.js ##

// pages/lession/lession.js
    // 读取本地数据
    let datas = require("../../data/localData.js");
    //console.log(datas);
    
    //注册页面
    Page({ 
      /** * 页面的初始数据 */
      data: { 
        listData:[]
      },
    
      onLoad:function(){ 
        //将本地数据写入data
        this.setData({ 
          listData:datas.localData
        });
        console.log(this.data.listData);
      }
    })

### （3）轮播图lession.wxml及样式lession.wxss ###

轮播图容器swiper，组件swiper-item。

利用**block**的\*\*wx:for="\{ \{listData\}\}“**列表渲染swiper-item，利用**wx:key=”\{ \{index\}\}"\*\*作为唯一属性标识每个组件。

<view>
      <swiper class='swiper' indicator-dots='true' autoplay='true' indicator-color='#00a00f' indicator-active-color='#FFE4C4'>
          
        <block wx:for="{ {listData}}" wx:key="{ {index}}">
          <swiper-item class='swiper-item'>
            <image class='swiper-img' src='{ {item.carousel}}'></image>
          </swiper-item>
        </block>
          
      </swiper> 
    </view>

/* pages/lession/lession.wxss */
    .swiper{ 
      width: 100%;
      height: 400rpx;
    }
    .swiper-img{ 
      width: 100%;
      height: 100%;
    }

[https_github.com_leoricding_-]: https://github.com/leoricding/-
[20190719112559696.PNG]: /images/20211203/2a8e0243b6754e26b21feb2b81f61ca4.png