mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-06-08 15:23:17 +08:00
v2.1.2
This commit is contained in:
Weilanwl
@@ -1,34 +1,38 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
cardCur: 0,
|
||||
tower: [{
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
url: 'https://image.weilanwl.com/img/4x3-1.jpg'
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
|
||||
}, {
|
||||
id: 1,
|
||||
url: 'https://image.weilanwl.com/img/4x3-2.jpg'
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
url: 'https://image.weilanwl.com/img/4x3-3.jpg'
|
||||
}, {
|
||||
id: 3,
|
||||
url: 'https://image.weilanwl.com/img/4x3-4.jpg'
|
||||
}, {
|
||||
id: 4,
|
||||
url: 'https://image.weilanwl.com/img/4x3-2.jpg'
|
||||
}, {
|
||||
id: 5,
|
||||
url: 'https://image.weilanwl.com/img/4x3-4.jpg'
|
||||
}, {
|
||||
id: 6,
|
||||
url: 'https://image.weilanwl.com/img/4x3-2.jpg'
|
||||
}]
|
||||
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'
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
|
||||
}, {
|
||||
id: 5,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
|
||||
}, {
|
||||
id: 6,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
|
||||
}],
|
||||
},
|
||||
onLoad() {
|
||||
this.towerSwiper('tower');
|
||||
this.towerSwiper('swiperList');
|
||||
// 初始化towerSwiper 传已有的数组名即可
|
||||
},
|
||||
DotStyle(e) {
|
||||
@@ -51,28 +55,25 @@ Page({
|
||||
list[i].mLeft = i - parseInt(list.length / 2)
|
||||
}
|
||||
this.setData({
|
||||
towerList: list
|
||||
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.towerList;
|
||||
let list = this.data.swiperList;
|
||||
if (direction == 'right') {
|
||||
let mLeft = list[0].mLeft;
|
||||
let zIndex = list[0].zIndex;
|
||||
@@ -83,7 +84,7 @@ Page({
|
||||
list[list.length - 1].mLeft = mLeft;
|
||||
list[list.length - 1].zIndex = zIndex;
|
||||
this.setData({
|
||||
towerList: list
|
||||
swiperList: list
|
||||
})
|
||||
} else {
|
||||
let mLeft = list[list.length - 1].mLeft;
|
||||
@@ -95,8 +96,8 @@ Page({
|
||||
list[0].mLeft = mLeft;
|
||||
list[0].zIndex = zIndex;
|
||||
this.setData({
|
||||
towerList: list
|
||||
swiperList: list
|
||||
})
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
})
|
||||
@@ -1,41 +1,45 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<text class='icon-back'></text> 轮播图
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
|
||||
<view slot="backText">返回</view>
|
||||
<view slot="content">轮播图</view>
|
||||
</cu-custom>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-pink'></text> 全屏限高轮播
|
||||
<view class="action">
|
||||
<text class="icon-title text-pink"></text> 全屏限高轮播
|
||||
</view>
|
||||
<view class='action'>
|
||||
<switch class='sm' bindchange='DotStyle'></switch>
|
||||
<view class="action">
|
||||
<switch class="sm" bindchange="DotStyle"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<swiper class="screen-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
|
||||
<swiper-item wx:for="{{4}}" wx:key>
|
||||
<image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill'></image>
|
||||
<swiper-item wx:for="{{swiperList}}" wx:key>
|
||||
<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>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-pink'></text> 卡片式轮播
|
||||
<view class="action">
|
||||
<text class="icon-title text-pink"></text> 卡片式轮播
|
||||
</view>
|
||||
</view>
|
||||
<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="{{4}}" wx:key class="{{cardCur==index?'cur':''}}">
|
||||
<view class='bg-img shadow-blur' style="background-image:url(https://image.weilanwl.com/img/4x3-{{index+1}}.jpg)"></view>
|
||||
<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="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-pink'></text> 堆叠式轮播
|
||||
<view class="action">
|
||||
<text class="icon-title text-pink"></text> 堆叠式轮播
|
||||
</view>
|
||||
</view>
|
||||
<view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">
|
||||
<view class='tower-item {{item.zIndex==1?"none":""}}' wx:for="{{towerList}}" wx:key style='transform: scale({{0.5+item.zIndex/10}});margin-left:{{item.mLeft*100-150}}rpx;z-index:{{item.zIndex}}'>
|
||||
<view class='bg-img shadow-blur' style="background-image:url({{item.url}})"></view>
|
||||
<view class="tower-item {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key style="--index:{{item.zIndex}};--left:{{item.mLeft}}">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1 +1,5 @@
|
||||
/* pages/component/swiper/swiper.wxss */
|
||||
.tower-swiper .tower-item {
|
||||
transform: scale(calc(0.5 + var(--index) / 10));
|
||||
margin-left: calc(var(--left) * 100rpx - 150rpx);
|
||||
z-index: var(--index);
|
||||
}
|
||||
Reference in New Issue
Block a user