学堂主页
<h1>学堂主页</h1>
<ul>
<li>样式图例</li>
</ul>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=4c38185b696b65703367dd0fc6e163f7&file=file.png" alt="" /></p>
<ul>
<li>示例代码</li>
</ul>
<h4>js代码</h4>
<pre><code class="language-html">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
})
}
}
})</code></pre>
<h4>wxml代码</h4>
<pre><code class="language-html"><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></code></pre>