评论

小程序实现列表拖拽排序

拖拽功能在很多场景下都是很方便的操作体验,特别是对于列表本身的排序,不仅直观而且非常效率,这也是本期带给大家的技术分享点,希望各位同学喜欢

小程序列表拖拽排序

wxml

<view class='listbox'>
    <view class='list kelong' hidden='{{!showkelong}}' style='top:{{kelong.top}}px'>
      <view class='index'>?</view>
      <image src='{{kelong.xt}}' class='xt'></image>
      <view class='info'>
        <view class="name">{{kelong.name}}</view>
        <view class='sub-name'>{{kelong.subname}}</view>
      </view>
      <image src='/images/sl_36.png' class='more'></image>
    </view>

    <view class='list' wx:for="{{optionList}}" wx:key="">
      <view class='index'>{{index+1}}</view>
      <image src='{{item.xt}}' class='xt'></image>
      <view class='info'>
        <view class="name">{{item.name}}</view>
        <view class='sub-name'>{{item.subname}}</view>
      </view>
      <image src='/images/sl_36.png' class='more'></image>
      <view class='moreiconpl' data-index='{{index}}' catchtouchstart='dragStart' catchtouchmove='dragMove' catchtouchend='dragEnd'></view>
    </view>
  </view>

wxss

.map-list .list {
  position: relative;
  height: 120rpx;
}

.map-list .list::after {
  content: '';
  width: 660rpx;
  height: 2rpx;
  background-color: #eee;
  position: absolute;
  right: 0;
  bottom: 0;
}

.map-list .list .xt {
  display: block;
  width: 95rpx;
  height: 77rpx;
  position: absolute;
  left: 93rpx;
  top: 20rpx;
}

.map-list .list .more {
  display: block;
  width: 48rpx;
  height: 38rpx;
  position: absolute;
  right: 30rpx;
  top: 40rpx;
}

.map-list .list .info {
  display: block;
  width: 380rpx;
  height: 80rpx;
  position: absolute;
  left: 220rpx;
  top: 20rpx;
  font-size: 30rpx;
}

.map-list .list .info .sub-name {
  font-size: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #646567;
}

.map-list .list .index {
  color: #e4463b;
  font-size: 32rpx;
  font-weight: bold;
  position: absolute;
  left: 35rpx;
  top: 40rpx;
}

js

data:{
kelong: {
      top: 0,
      xt: '',
      name: '',
      subname: ''
    },
    replace: {
      xt: '',
      name: '',
      subname: ''
    },
},
dragStart: function(e) {
    var that = this
    var kelong = that.data.kelong
    var i = e.currentTarget.dataset.index
    kelong.xt = this.data.optionList[i].xt
    kelong.name = this.data.optionList[i].name
    kelong.subname = this.data.optionList[i].subname

    var query = wx.createSelectorQuery();
    //选择id
    query.select('.listbox').boundingClientRect(function(rect) {
      // console.log(rect.top)
      kelong.top = e.changedTouches[0].clientY - rect.top - 30
      that.setData({
        kelong: kelong,
        showkelong: true
      })
    }).exec();
  },
  dragMove: function(e) {
    var that = this
    var i = e.currentTarget.dataset.index
    var query = wx.createSelectorQuery();
    var kelong = that.data.kelong
    var listnum = that.data.optionList.length
    var optionList = that.data.optionList
    query.select('.listbox').boundingClientRect(function(rect) {
      kelong.top = e.changedTouches[0].clientY - rect.top - 30
      if(kelong.top < -60) {
        kelong.top = -60
      } else if (kelong.top > rect.height) {
        kelong.top = rect.height - 60
      }
      that.setData({
        kelong: kelong,
      })
    }).exec();
  },
  dragEnd: function(e) {
    var that = this
    var i = e.currentTarget.dataset.index
    var query = wx.createSelectorQuery();
    var kelong = that.data.kelong
    var listnum = that.data.optionList.length
    var optionList = that.data.optionList
    query.select('.listbox').boundingClientRect(function (rect) {
      kelong.top = e.changedTouches[0].clientY - rect.top - 30
      if(kelong.top<-20){
        wx.showModal({
          title: '删除提示',
          content: '确定要删除此条记录?',
          confirmColor:'#e4463b'
        })
      }
      var target = parseInt(kelong.top / 60)
      var replace = that.data.replace
      if (target >= 0) {
        replace.xt = optionList[target].xt
        replace.name = optionList[target].name
        replace.subname = optionList[target].subname
        optionList[target].xt = optionList[i].xt
        optionList[target].name = optionList[i].name
        optionList[target].subname = optionList[i].subname
        optionList[i].xt = replace.xt
        optionList[i].name = replace.name
        optionList[i].subname = replace.subname
      }
      that.setData({
        optionList: optionList,
        showkelong:false
      })
    }).exec();
  },
点赞 10
收藏
评论

17 个评论

  • 哈罗哈皮
    哈罗哈皮
    2020-03-25

    你们手机使用这个拖拽不卡顿?

    2020-03-25
    赞同 2
    回复
  • 阳小輝
    阳小輝
    2019-10-22

    可以稍微文字讲解一下思路吗?新手不太懂,谢谢哈

    2019-10-22
    赞同 2
    回复
  • 尧
    2021-10-21

    自己封装成了组件(wxs),下载后把组建拷贝到项目中即可直接使用。

    https://gitee.com/ayao1010/miniapp-drag-to-sort

    clone到本地后,用开发者工具打开,首页就是demo。

    喜欢的话请不吝给个star~~

    2021-10-21
    赞同 1
    回复 1
    • peng
      peng
      03-30
      你绝对是个大神
      03-30
      回复
  • 小程序商城定制开发2600元全包
    小程序商城定制开发2600元全包
    2021-04-27

    你这个代码 哈哈哈哈

    2021-04-27
    赞同 1
    回复
  • Qd
    Qd
    2020-05-26

    牛逼


    2020-05-26
    赞同 1
    回复
  • 火辣辣
    火辣辣
    2021-06-29

    iPhone 12 pro max,体验卡的不行

    2021-06-29
    赞同
    回复
  • 山
    2021-02-02

    他这个代码和样式 对应不上,希望完善一下样式

    2021-02-02
    赞同
    回复
  • 炎
    2020-07-29

    可以试试用transform来实现,比top的性能会好一点。

    2020-07-29
    赞同
    回复 1
    • GN
      GN
      2021-06-17
      有类似吗
      2021-06-17
      回复
  • 不才
    不才
    2020-07-17

    优秀


    2020-07-17
    赞同
    回复
  • Steven🍎Hu
    Steven🍎Hu
    2020-05-08

    完整的demo能发出来看看么?

    2020-05-08
    赞同
    回复

正在加载...

登录 后发表内容