- 在components文件夹中创建 slider文件,并在文件中创建Slider组件
- wxml
<movable-area class="_sideslip" style="width: {{width}}rpx; height: {{height}}rpx;">
<movable-view direction="horizontal" class="_sideslip--movable" out-of-bounds="{{out}}" damping="20" x="{{x}}" style="width: {{width + slideWidth}}rpx; height: {{height}}rpx;" inertia bindchange="bindchange">
<view class="slideslip-left" style="width: {{width}}rpx">
<slot name="left"></slot>
</view>
<view class="slideslip-right" >
<slot name="right"></slot>
</view>
</movable-view>
</movable-area>
- wxss
._sideslip {
overflow: hidden;
}
._sideslip--movable {
display: flex;
flex-direction: row;
overflow: hidden;
justify-content: flex-start;
align-items: flex-start;
box-sizing: border-box;
}
.slideslip-left {
flex-shrink: 0;
}
.slideslip-right {
display: flex;
flex-shrink: 0;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
box-sizing: border-box;
}
- js
// components/slider/Slider.js
Component({
options: {
multipleSlots: true
},
properties: {
// 组件显示区域的宽度 (rpx)
width: {
type: Number,
value: 750 // 750rpx 即整屏宽
},
// 组件显示区域的高度 (rpx),必填项
height: {
type: Number,
value: 0
},
// 组件滑动显示区域的宽度 (rpx)
slideWidth: {
type: Number,
value: 0
},
// 是否允许惯性越界
out: {
type: Boolean,
value: true
},
},
data: {
x:0,
},
ready() {
const info = wx.getSystemInfoSync()
let rate = info.screenWidth / 750;
let params = {}
const query = wx.createSelectorQuery().in(this)
query
.select('.slideslip-right')
.boundingClientRect(res => {
this.setData({
slideWidth: res.width / rate
});
})
.exec()
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () {
this.setData({
x: 0,
});
},
},
methods: {
bindchange(e) {
// if (this.data.x==0){
// this.setData({
// x: 1,
// });
// }
}
}
})
- json
{
"component": true,
"usingComponents": {}
}
使用: