<!--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>

.movable-view { display: flex; direction: row; overflow: hidden;}.container { overflow: hidden;}

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 }) } } }})

 <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>