学堂主页

• 样式图例

• 示例代码

js代码

const app = getApp();
Page({
    data: {
      CustomBar: app.globalData.CustomBar,
      cardCur: 0,
      swiperList: [{
        id: 0,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
      }, {
        id: 1,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
      }, {
        id: 2,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
      }, {
        id: 3,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
      }],

      typeList: [
        { name : '综合' , imgUrl : 'https://tmnote-ga.obs.cn-north-1.myhuaweicloud.com/static/image/study1.png'},
        { name : '逻辑' , imgUrl : 'https://tmnote-ga.obs.cn-north-1.myhuaweicloud.com/static/image/study2.png'},
        { name : '书法' , imgUrl : 'https://tmnote-ga.obs.cn-north-1.myhuaweicloud.com/static/image/study3.png'},
        { name : '话题' , imgUrl : 'https://tmnote-ga.obs.cn-north-1.myhuaweicloud.com/static/image/study4.png'},
        { name : '其他' , imgUrl : 'https://tmnote-ga.obs.cn-north-1.myhuaweicloud.com/static/image/study5.png'},
      ],

      bookList : [],
    },
    onLoad() {
      this.towerSwiper('swiperList');
      // 初始化towerSwiper 传已有的数组名即可

      this.setData({
          bookList : [
            {
                title:'三年级：还原问题',
                desc:'十二天学习关于逆向计算的问题',
                imgUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
            },
            {
                title:'三年级：行程问题',
                desc:'十二天学习关于行程问题的计算',
                imgUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
            }
          ]
      });
    },

    //进入课程的详情
    toBookDetail(e) {
        wx.navigateTo({
            url: '/pages/study/goodsDetail/goodsDetail'
        })
    },

    DotStyle(e) {
      this.setData({
        DotStyle: e.detail.value
      })
    },
    // cardSwiper
    cardSwiper(e) {
      this.setData({
        cardCur: e.detail.current
      })
    },
    // towerSwiper
    // 初始化towerSwiper
    towerSwiper(name) {
      let list = this.data[name];
      for (let i = 0; i < list.length; i++) {
        list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
        list[i].mLeft = i - parseInt(list.length / 2)
      }
      this.setData({
        swiperList: list
      })
    },
    // towerSwiper触摸开始
    towerStart(e) {
      this.setData({
        towerStart: e.touches[0].pageX
      })
    },
    // towerSwiper计算方向
    towerMove(e) {
      this.setData({
        direction: e.touches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left'
      })
    },
    // towerSwiper计算滚动
    towerEnd(e) {
      let direction = this.data.direction;
      let list = this.data.swiperList;
      if (direction == 'right') {
        let mLeft = list[0].mLeft;
        let zIndex = list[0].zIndex;
        for (let i = 1; i < list.length; i++) {
          list[i - 1].mLeft = list[i].mLeft
          list[i - 1].zIndex = list[i].zIndex
        }
        list[list.length - 1].mLeft = mLeft;
        list[list.length - 1].zIndex = zIndex;
        this.setData({
          swiperList: list
        })
      } else {
        let mLeft = list[list.length - 1].mLeft;
        let zIndex = list[list.length - 1].zIndex;
        for (let i = list.length - 1; i > 0; i--) {
          list[i].mLeft = list[i - 1].mLeft
          list[i].zIndex = list[i - 1].zIndex
        }
        list[0].mLeft = mLeft;
        list[0].zIndex = zIndex;
        this.setData({
          swiperList: list
        })
      }
    }
  })

wxml代码

<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">主页样例</view></cu-custom>

<!-- 上方的轮播图位置 -->
<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
  <swiper-item wx:for="{{swiperList}}" wx:key class="{{cardCur==index?'cur':''}}">
    <view class="swiper-item">
      <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
      <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
    </view>
  </swiper-item>
</swiper>

<!-- 中间的课程类型区域 -->
<view class="padding">
    <view class="grid col-5 text-center bg-white radius">
        <view class="padding" wx:for="{{typeList}}" wx:key>
            <image mode="widthFix" src="{{ item.imgUrl }}"></image>
            <view><text>{{ item.name }}</text></view>
        </view>
    </view>
</view>

<!-- 标题部分 -->
<view class="cu-list menu">
    <view class="cu-item">
      <view class="content">
        <image src="https://tmnote-ga.obs.cn-north-1.myhuaweicloud.com/static/image/icon1.png" class="png" mode="aspectFit" style="width: 40rpx;height: 40rpx;"></image>
        <text class="text-bold">热门推荐课程</text>
      </view>
      <view class="action">
        <text class="text-gray">更多</text>
        <text class="cuIcon-right lg text-gray"></text>
      </view>
    </view>
</view>

<view class="cu-card article">
  <view class="cu-item padding-top shadow" bind:tap="toBookDetail" wx:for="{{bookList}}" wx:key="id">
    <view class="content">
      <image src="{{ item.imgUrl }}" mode="aspectFill"></image>
      <view class="desc">
        <view>
            <text class="text-bold">{{item.title}}</text>
            <view class="text-sm padding-top-xs">{{item.desc}}</view>
        </view>
        <view>
          <view class="cu-tag bg-red light sm round">推荐</view>
          <view class="cu-tag bg-green light sm round">好评</view>
        </view>
      </view>
    </view>
  </view>
</view>