【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）

cnpm i tdesign-miniprogram -S --production

/* app.wxss 定义全局样式 */
page {
  /* 默认页面底色设置为白色 */
  background: white;
  /* 底部留白的高度需与底部导航的高度相同 */
  padding-bottom: 100rpx;
}

<view class="blankBar"> 
</view>

.blankBar {
  /* 底部留白的高度需与底部导航的高度相同 */
  height: 100rpx;
}

  "lazyCodeLoading": "requiredComponents",

export default {
   '1':'https://ucc.alicdn.com/images/user-upload-01/6dca0e87288a4c37b76e7d26e016e299.jpeg',
   '2':'https://ucc.alicdn.com/images/user-upload-01/8dd7ab28ae6246b69a1722b3ad18d506.jpeg'
}

export default {
   '1':'https://ucc.alicdn.com/images/user-upload-01/de253e12408f4133adf8f82982e22ce5.jpeg',
   '2':'https://ucc.alicdn.com/images/user-upload-01/e9fb6f4e461744e593ca305440760e16.jpeg',
   '3':'https://ucc.alicdn.com/images/user-upload-01/63926e3235434cd8bd30285f5612d303.jpeg',
   '4':'https://ucc.alicdn.com/images/user-upload-01/601a29123c17471dac01e358dce8e1fe.jpeg',
}

{
  "usingComponents": {
    "t-swiper": "tdesign-miniprogram/swiper/swiper",
    "t-tabs": "tdesign-miniprogram/tabs/tabs",
    "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
    "t-avatar": "tdesign-miniprogram/avatar/avatar"
  }
}

<!-- 轮播图 -->
<view class="swiperBox">
  <t-swiper image-props="{{imageProps}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" list="{{swiperList}}" navigation="{{ { type: 'dots-bar' } }}" />
</view>
<!-- 分类页签 tab -->
<t-tabs defaultValue="{{defaultTab}}" theme="card" bindchange='tabChange'>
  <t-tab-panel wx:for="{{tabList}}" wx:key="index" label="{{item.label}}" value="{{item.index}}" />
</t-tabs>
<!-- 成员列表 -->
<view wx:for="{{filteredMemberList}}" wx:key="index" class="memberBox">
  <t-avatar class="avatar-example" shape="round" image="{{item.imgURL}}" />
  <view class="memberName">
    {{item.name}}
  </view>
  <view class="memberStaus">
    {{item.status}} ing
  </view>
</view>

.swiperBox{
 padding: 30rpx;
}

.memberBox{
  padding: 20rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid rgb(223, 217, 217);
  background-color: #ffffff;
}

.memberName{
  font-weight: bold;
  font-size: 40rpx;
  padding-left: 30rpx;
}

.memberStaus{
  padding-left: 40rpx;
}

// 导入图片素材
import girlImgDic from '../../assets/images/美女/data'
import boyImgDic from '../../assets/images/帅哥/data'
Page({
  data: {
    // 添加轮播图片的属性
    imageProps: {
      // 图片按宽度自适应
      mode: 'widthFix'
    },
    // 轮播从下标为 0 的图片开始
    current: 0,
    // 自动轮播
    autoplay: true,
    //  每张图片的停留时间
    duration: 500,
    // 轮播时间间隔
    interval: 5000,
    // 轮播图的图片列表
    swiperList: [
      girlImgDic['1'],
      girlImgDic['2'],
      boyImgDic['4'],
    ],
    // 默认 tab 页签的 index
    defaultTab: '0',
    // 分类页签 tab 列表
    tabList: [{
        index: '0',
        label: '全部'
      },
      {
        index: '1',
        label: '男'
      },
      {
        index: '2',
        label: '女'
      },
    ],
    // 过滤后的成员列表
    filteredMemberList: [],
    // 总成员列表，其中 gender '1'为男，'2'为女
    allMemberList: [{
        imgURL: girlImgDic['1'],
        name: '小霞',
        gender: '2',
        status: '筹备婚礼'
      },
      {
        imgURL: girlImgDic['2'],
        name: '若依',
        gender: '2',
        status: '享受泡澡'
      },
      {
        imgURL: boyImgDic['1'],
        name: '约翰',
        gender: '1',
        status: '忧郁'
      },
      {
        imgURL: boyImgDic['2'],
        name: '陈翔',
        gender: '1',
        status: '思考'
      },
      {
        imgURL: boyImgDic['4'],
        name: '李阳',
        gender: '1',
        status: '沉醉'
      },
    ]
  },
  // 切换页签时触发
  tabChange: function (e) {
    let gender = e.detail.value
    if (gender !== '0') {
      this.setData({
        filteredMemberList: this.data.allMemberList.filter(item => item.gender === gender)
      })
    } else {
      this.setData({
        filteredMemberList: this.data.allMemberList
      })
    }
  },
  // 生命周期--页面加载时执行
  onLoad(options) {
    this.setData({
      filteredMemberList: this.data.allMemberList
    })
  },
  onShow() {
    this.getTabBar().init();
  },
})

<!-- 轮播图 -->
<view class="swiperBox">
  <t-swiper image-props="{{imageProps}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" list="{{swiperList}}" navigation="{{ { type: 'dots-bar' } }}" />
</view>

<!-- 分类页签 tab -->
<t-tabs defaultValue="{{defaultTab}}" theme="card" bindchange='tabChange'>
  <t-tab-panel wx:for="{{tabList}}" wx:key="index" label="{{item.label}}" value="{{item.index}}" />
</t-tabs>

  // 切换页签时触发
  tabChange: function (e) {
    let gender = e.detail.value
    if (gender !== '0') {
      this.setData({
        filteredMemberList: this.data.allMemberList.filter(item => item.gender === gender)
      })
    } else {
      this.setData({
        filteredMemberList: this.data.allMemberList
      })
    }
  },

<!-- 成员列表 -->
<view wx:for="{{filteredMemberList}}" wx:key="index" class="memberBox">
  <t-avatar class="avatar-example" shape="round" image="{{item.imgURL}}" />
  <view class="memberName">
    {{item.name}}
  </view>
  <view class="memberStaus">
    {{item.status}} ing
  </view>
</view>

wx:for="{{filteredMemberList}}" wx:key="index" 
 

  <view class="memberName">
    {{item.name}}
  </view>

  // 生命周期--页面加载时执行
  onLoad(options) {
    this.setData({
      filteredMemberList: this.data.allMemberList
    })
  },