小程序地址左滑默认删除

时间：2020-03-24 11:17:15 收藏：0 阅读：97

我们在开发小程序时，总会遇到一些删除功能列表的操作,触屏左滑操作,即显示可操作删除按钮;

首先，我们需要在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触屏左滑操作