小程序提供了一个可移动视图容器movable-view；下面我来给大家介绍一个通过movable-view和movable-area组合编写的一个侧滑删除自定义组件。
先查看一下效果图：
5.gif
下面看一下布局：
slide-slip.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>
movable-areaz主要用来限制可视区域大小；movable-view整个滑动的view大小，
侧滑左边的默认展示内容区域
<view class="slideslip-left" style="width: {{width}}rpx">
<slot name="left"></slot>
</view>
侧滑右边的默认隐藏区域
<view class="slideslip-right" >
<slot name="right"></slot>
</view>
slide-slip.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,
// });
// }
}
}
})
这里主要是计算手机像素和小程序rpx的换算率，然后重新设置左边整个可移动的视图的大小
slide-slip.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;
}
使用：
<slide-slip height="150" show="{{false}}">
<view slot="left" class="sideslip-content">
<view class="container" data-item="{{item}}" bindtap="onClickItem">
<view class="title">{{item.title}}</view>
<view class="bottom_container">
<view class="number">共{{item.count}}条留言</view>
<view class="number">{{item.look}}浏览</view>
<button hover-class="none" data-item="{{item}}" open-type="share" catchtap="onClicShare">
<image class="share" src="{{'/images/icon_share.png'}}" data-item="{{item}}"></image>
</button>
</view>
</view>
</view>
<view slot="right" class="sideslip-oprate">
<view class='sideslip-red' data-item="{{item}}" bindtap="onClickDelete">删除</view>
<view class='sideslip-blue' data-item="{{item}}" bindtap="onClickEdit">编辑</view>
</view>
</slide-slip>
<view class="line_10" wx:if="{{showLine}}"></view>
