axml
<swiper style="height:{{moduleHeight}}rpx">
<swiper-item>
<scroll-view catchTouchStart="start" catchTouchMove="move" catchTouchEnd="end">
<!-- 多图滑动 -->
<view style="display:flex;justify-content:center;width:714rpx;background-color:{{moduleBgColor}};background-image:url({{moduleImg||moduleImage}});margin:0 atuo;">
<view style="width:714rpx;height:{{picHeight}}rpx;margin:{{picTop||0}}rpx 0 {{picBottom||0}}rpx 0;overflow:hidden;">
<view style="width:{{picLes*picWidth+(picLes-1)*picSpace}}rpx;height:{{picHeight}}rpx;position:relative;">
<block a:for="{{picArr}}">
<view style="width:{{picWidth}}rpx;
height:{{picHeight}}rpx;
position:absolute;
left:{{animationArr[index].left}}rpx;
transform:scale({{animationArr[index].scale}});
transition-property:left,transform;
transition-duration:{{animationArr[index].time}}s,{{animationArr[index].time}}s
">
<view style="width:{{picWidth}}rpx;height:{{picHeight}}rpx;">
<image mode="scaleToFill" src="{{item.img||item.image}}" style="width:100%;height:100%;background-size:100% 100%;border-radius:{{isRound==1?roundSize:0}}rpx"/>
</view>
</view>
</block>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
</swiper-item>
</swiper>
js
import { enhanceComponent } from 'tb-shop-enhance';
Component(enhanceComponent({
data: {
gap: 0,
leftIndex: 0,
rightIndex: 0,
animationArr: [],
picArr: [
{
"image": "https://img.alicdn.com/imgextra/i4/2432558160/TB2UwQZXxXkpuFjy0FiXXbUfFXa_!!2432558160-0-shop_design.jpg",
"url": "//shop116716739.m.taobao.com"
},
{
"image": "https://img.alicdn.com/imgextra/i3/2432558160/TB27cs0XrVkpuFjSspcXXbSMVXa_!!2432558160-0-shop_design.jpg",
"url": "//shop116716739.m.taobao.com"
},
{
"image": "https://img.alicdn.com/imgextra/i2/2432558160/TB2I8ynXUdnpuFjSZPhXXbChpXa_!!2432558160-0-shop_design.jpg",
"url": "//shop116716739.m.taobao.com"
},
{
"image": "https://img.alicdn.com/imgextra/i3/2432558160/TB2UnA0XwxlpuFjSszbXXcSVpXa_!!2432558160-0-shop_design.jpg",
"url": "//shop116716739.m.taobao.com"
}
]
},
onInit() {
// mock数据需要修改client文件夹中的page文件
// 正常运行过程中模块总是默认传入data参数
},
didMount() {
// 加载成功后可以异步获取数据更新数据展示,例如请求接口等操作
const { gdc = {}, mds = {}, modUtils } = this.props.data;
let data = mds.moduleData
this.setData({
fs: this.props.data.modUtils.env.screenWidth / 750,
moduleBgColor: data.moduleBgColor || '#fcc',
moduleImg: data.moduleImg,
moduleImage: data.moduleImage,
picSize: data.picSize || '180,180,20,20,0',
isRound: data.isRound || '1',
roundSize: data.roundSize || '50',
picTime: data.picTime || '0.5,3',
scale: data.scale || '0.9',
isAuto: data.isAuto || '1'
});
if (!data.picArr || !data.picArr[0] || !data.picArr[0].image || data.picArr[0].image == '') {
this.setData({ picArr: this.data.picArr })
} else {
this.setData({ picArr: data.picArr })
}
// 图片宽,高,上边距,下边距
let picSize = this.data.picSize.split(",");
this.setData({ picWidth: parseInt(picSize[0]), picHeight: parseInt(picSize[1]), picTop: parseInt(picSize[2]), picBottom: parseInt(picSize[3]), picSpace: parseInt(picSize[4]) });
// 动画切换时间,展示时间
let picTime = this.data.picTime.split(",");
this.setData({ duration: picTime[0], intaval: picTime[1] })
// 动画
let picArr = this.data.picArr.concat(this.data.picArr);
this.data.picArr = this.data.picArr.concat(picArr);
this.setData({ picArr: this.data.picArr });
this.data.picArr.map((item, index) => {
this.data.animationArr[index] = {
"left": (index - this.data.picArr.length / 3) * (this.data.picWidth + this.data.picSpace),
"scale": (((this.data.picArr.length % 2 != 1) ? (index + 1) : index) % 2 == 1) ? 1 : this.data.scale,
"time": this.data.duration
}
});
this.setData({ animationArr: this.data.animationArr });
// 图片长度
this.setData({ picLes: this.data.picArr.length });
// 滚动最大距离
this.setData({ maxWidth: this.data.picLes * (this.data.picWidth + this.data.picSpace) - 714 });
// 模块高度
this.setData({ moduleHeight: this.data.picHeight + this.data.picTop + this.data.picBottom });
this.setData({ leftIndex: this.data.picArr.length - 1 });
// 自动滚动
if (this.data.isAuto == '1') {
this.timer = setInterval(() => {
this.left()
}, this.data.intaval * 1000)
}
},
methods: {
start(e) {
clearInterval(this.timer)
this.setData({ start: e.changedTouches[0].clientX })
},
end(e) {
if (this.data.isAuto == '1') {
this.timer = setInterval(() => {
this.left()
}, this.data.intaval * 1000)
}
this.setData({ gap: e.changedTouches[0].clientX - this.data.start });
if (this.data.gap < 0) {
this.left()
} else if (this.data.gap > 0) {
this.right()
}
},
left() {
if (this.data.leftIndex + 1 > this.data.picArr.length - 1) {
this.setData({ leftIndex: 0 })
} else {
this.setData({ leftIndex: ++this.data.leftIndex })
}
if (this.data.rightIndex + 1 > this.data.picArr.length - 1) {
this.setData({ rightIndex: 0 })
} else {
this.setData({ rightIndex: ++this.data.rightIndex })
}
let leftArr = this.data.animationArr.pop();
this.data.animationArr.unshift(leftArr);
this.data.animationArr.map((item, index) => {
if (index == this.data.leftIndex) {
this.data.animationArr[index].time = 0
} else {
this.data.animationArr[index].time = this.data.duration
}
})
this.setData({ animationArr: this.data.animationArr })
},
right() {
if (this.data.rightIndex - 1 < 0) {
this.setData({ rightIndex: this.data.picArr.length - 1 })
} else {
this.setData({ rightIndex: --this.data.rightIndex })
}
if (this.data.leftIndex - 1 < 0) {
this.setData({ leftIndex: this.data.picArr.length - 1 })
} else {
this.setData({ leftIndex: --this.data.leftIndex })
}
let rightArr = this.data.animationArr.shift();
this.data.animationArr.push(rightArr);
this.data.animationArr.map((item, index) => {
if (index == this.data.rightIndex) {
this.data.animationArr[index].time = 0
} else {
this.data.animationArr[index].time = this.data.duration
}
})
this.setData({ animationArr: this.data.animationArr })
},
move(e) {
},
/**
* 宝贝点击跳转
* @param {宝贝链接} url
*/
onClickBaby(e) {
const { mds = {} } = this.props.data;
console.log(e.currentTarget.dataset.url)
let gotoObj = {
url: e.currentTarget.dataset.url, //字符串,可以是小程序内部url,也可以是H5/WEEX url,也可以是其他小程序url
mds: mds,//必填,从props.data下发的模块moduleData
config: {
spmd: 0,//spm参数D位,默认为0(就是之前的nid)
type: "",//跳转方式,默认为空,如果有定制需求,可以传递:replace/replaceAll/switchTab
}
}
this.props.data.modUtils.router.navigateToUrl(gotoObj.url, gotoObj.mds, gotoObj.config);
}
}
}));