lp-weapp
Version:
一套组件化、可复用、易扩展的微信小程序 UI 组件库
129 lines (126 loc) • 3.39 kB
JavaScript
// components/template/swiper/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
//时候显示指示点
dots: {
type: Boolean,
value: true,
},
//指示点颜色
dotsColor: {
type: String,
value: 'rgba(0, 0, 0, .3)',
},
//指示点选中颜色
dotsActColor: {
type: String,
value: '#000',
},
//轮播图高度
height: {
type: Number,
value: 360,
},
//自动轮播
autoplay: {
type: Boolean,
value: false,
},
//切换间隔
interval: {
type: Number,
value: 5000,
},
//无缝滑动
circular: {
type: Boolean,
value: false,
},
//列表属性定义
props: {
type: Object,
value: {
path: 'path',
type: 'type',
url: 'url',
},
},
//轮播图列表
list: {
type: Array,
value: [],
},
//图片显示模式
mode: {
type: String,
value: 'aspectFill',
},
isTxv: {
type: Boolean,
value: false,
},
},
/**
* 组件的初始数据
*/
data: {
muted: false,
prevIndex: 0,
},
/**
* 组件的方法列表
*/
methods: {
// 地址跳转
toPath(e) {
let { path } = e.currentTarget.dataset;
if (path) {
wx.navigateTo({
url: path,
});
}
},
//静音切换
switchMuted() {
this.setData({
muted: !this.data.muted,
});
},
//轮播图切换
changeSwiper(e) {
let { current } = e.detail;
let prevType =
this.data.list[this.data.prevIndex][this.data.props.type];
if (prevType == 'video' && !this.data.isTxv) {
wx.createVideoContext(
`video${this.data.prevIndex}`,
this
).pause();
}
if (prevType == 'video' && this.data.isTxv) {
const player = this.selectComponent(
`#${
this.data.list[this.data.prevIndex][this.data.props.url]
}${this.data.prevIndex}`
);
player.pause();
}
let currentType = this.data.list[current][this.data.props.type];
if (currentType == 'video' && !this.data.isTxv) {
wx.createVideoContext(`video${current}`, this).play();
}
if (currentType == 'video' && this.data.isTxv) {
const player = this.selectComponent(
`#${this.data.list[current][this.data.props.url]}${current}`
);
player.play();
}
this.setData({
prevIndex: current,
});
},
},
});