标签：sel 实现 change div date contain selector 自动完成 val
我们在开发小程序时，总会遇到一些删除功能列表的操作,触屏左滑操作,即显示可操作删除按钮;
首先，我们需要在components里边注册一个组件，
我们在 components中创建一个slide目录，然后在新建Component，命名为slide,这样就自动生成slide组件
我们就在slide.wxml中写入
<!--slide-view/slide-view.wxml-->
<movable-area class="container" style="width: {{width}}rpx; height: {{height}}rpx;">
<movable-view direction="horizontal" class="movable-view" out-of-bounds="{{out}}" damping="20" x="{{x}}" style="width: {{width + slideWidth}}rpx; height: {{height}}rpx;" inertia bindtouchend="onTouchEnd" bindtouchstart="onTouchStart" bindchange="onChange">
<view class="left">
<slot name="left"></slot>
</view>
<view class="right">
<slot name="right"></slot>
</view>
</movable-view>
</movable-area>
slide.wxss中写入样式
.movable-view {
display: flex;
direction: row;
overflow: hidden;
}
.container {
overflow: hidden;
}
slide.js中写入 js逻辑
const _windowWidth = wx.getSystemInfoSync().windowWidth // (px)
Component({
/**
* 组件的属性列表
*/
options: {
multipleSlots: true,
},
properties: {
// 组件显示区域的宽度 (rpx)
width: {
type: Number,
value: 750 // 750rpx 即整屏宽
},
// 组件显示区域的高度 (rpx)
height: {
type: Number,
value: 0,
},
// 组件滑动显示区域的宽度 (rpx)
slideWidth: {
type: Number,
value: 0
}
},
/**
* 组件的初始数据
*/
data: {
viewWidth: _windowWidth, // (rpx)
// movable-view偏移量
x: 0,
// movable-view是否可以出界
out: false,
},
/**
* 组件的方法列表
*/
ready() {
this.updateRight()
},
methods: {
updateRight() {
// 获取右侧滑动显示区域的宽度
const that = this
const query = wx.createSelectorQuery().in(this)
query.select(‘.right‘).boundingClientRect(function(res) {
that._slideWidth = res.width
that._threshold = res.width / 2
that._viewWidth = that.data.width + res.width * (750 / _windowWidth)
that.setData({
viewWidth: that._viewWidth
})
}).exec()
},
onTouchStart(e) {
this._startX = e.changedTouches[0].pageX
},
// 当滑动范围超过阈值自动完成剩余滑动
onTouchEnd(e) {
this._endX = e.changedTouches[0].pageX
const {
_endX,
_startX,
_threshold
} = this
if (_endX > _startX && this.data.out === false) return
if (_startX - _endX >= _threshold) {
this.setData({
x: -this._slideWidth
})
} else if (_startX - _endX < _threshold && _startX - _endX > 0) {
this.setData({
x: 0
})
} else if (_endX - _startX >= _threshold) {
this.setData({
x: 0
})
} else if (_endX - _startX < _threshold && _endX - _startX > 0) {
this.setData({
x: -this._slideWidth
})
}
},
// 根据滑动的范围设定是否允许movable-view出界
onChange(e) {
if (!this.data.out && e.detail.x < -this._threshold) {
this.setData({
out: true
})
} else if (this.data.out && e.detail.x >= -this._threshold) {
this.setData({
out: false
})
}
}
}
})
当我们在页面引用时，我们可以在 .json来引用组件,这样我们就可以使用它
在页面 .wxml中注入样式
<slide-view width="750" height="150" slide-width="500">
<slide-view width="750" height="150" slide-width="500">
<view slot="left" class="l">
##这里的内容是你自己写的样式
</view>
<view slot="right" class="r">
<view class=‘read‘>默认</view>
<view class=‘delete‘>删除</view>
</view>
</slide-view>
这样我们就实现了slide触屏左滑操作
标签：sel 实现 change div date contain selector 自动完成 val
原文地址：https://www.cnblogs.com/BySee1423/p/12557235.html
