用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

20

主题

164

帖子

1745

积分

布道者

城市天气查询小程序

Rank: 6Rank: 6

积分
1745
QQ
2019-4-30 12:05:48 jwq782108446开发者认证 布道者 楼主 3915564
本帖最后由 jwq782108446 于 2019-4-30 13:02 编辑

因项目需要,要在小程序上实现一个用户可以自定义列表顺序的需求,产生了如下内容
两种实现方式:
第一种
-- 通过css修改坐标值实现拖拽效果,但会导致频繁setdata影响性能

第二种

-- 使用官方组件movable进行实现,效果流程
--  设计思路:实际上拖拽变化的只有被拖拽元素它滑动方向的最近的一个元素发生位置交换,我们只需要在合理的位置去出发更新数据交换这两个元素的位置即可

展示效果:
https://c.jiangwenqiang.com/api/data/draglist.mp4

个人小程序推广下
项目地址: https://github.com/Say-hi/wx-Map

1.jpg

wxml内容:
[HTML] 纯文本查看 复制代码
<view style="height: 100rpx;"></view>
<movable-area class="wrap"
              style="height: {{ lists.length * 40 }}px;">
  <movable-view bindtouchstart='start'
                catchtap="tap"
                animation="{{ animation }}"
                bindchange='movechange'
                catchtouchend='end'
                catchlongpress="longpress"
                data-index="{{ index }}"
                direction='vertical'
                class='item bgfff {{ move_index >= 0 ? move_index == item.s ? "move-item" : "no-move" : "" }}'
                y="{{ item.y }}"
                wx:for="{{ lists }}"
                wx:key>
    {{ item.t }}
  </movable-view>
</movable-area>

<view class="mask fix" wx:if="{{ long_mask }}">
  <form bindsubmit="btnChoose">
    <view class="mask-in br18 ">
      <view class="f30 c333 tac">修改内容</view>
      <input focus="1" name="tx" class="p200" placeholder="请输入内容" value="{{ lists[long_index].t }}" maxlength="20"/>
      <view class="mask-btn">
        <button form-type="submit" data-type="cancel" class="mb-item cancel">取消</button>
        <button form-type="submit" data-type="confirm" class="mb-item confirm cfff">确认</button>
      </view>
    </view>
  </form>
</view>

wxss内容:
[CSS] 纯文本查看 复制代码
.wrap {
  width: 100%;
}
.item {
  width: 100%;
  height: 40px;
  line-height: 39px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}
.move-item {
  z-index: 997;
  box-shadow: 0 0 11px #999;
}
.no-move {
  //background-color: #f1f1f1;
}

.fix {
  .mask-in {
    top: 30%;
  }
}
js内容:
[AppleScript] 纯文本查看 复制代码
// 获取全局应用程序实例对象
const app = getApp()
// 创建页面实例对象
Page({
  /**
   * 页面的初始数据
   */
  data: {
    lists: [
      {
        t: '你说什么这里是第一行啊',
        y: 0,
        s: 0
      },
      {
        t: 'asdf是第2行啊',
        y: 40,
        s: 1
      },
      {
        t: '123123是第3行啊',
        y: 80,
        s: 2
      },
      {
        t: 'zzzzzzzzz这里是第4行啊',
        y: 120,
        s: 3
      },
      {
        t: 'aaaaa这里是5啊',
        y: 160,
        s: 4
      }
    ],
    step: 40,
    move_index: -1,
    Y: -1
  },
  tap () {
    console.log('tap')
  },
  start (e) {
    this.setData({
      animation: true,
      move_index: this.data.lists[e.currentTarget.dataset.index].s * 1
    })
    this.data.Y = this.data.lists[e.currentTarget.dataset.index].s * 1
  },
  movechange (e) {
    if (e.detail.source === 'touch') {
      let change = Math.floor(e.detail.y / this.data.step)
      if (this.data.Y === change) return
      for (let [i, v] of this.data.lists.entries()) {
        if (v.s === change) {
          let temp2 = this.data.lists[this.data.move_index].y
          this.data.lists[this.data.move_index].y = this.data.lists[i].y
          this.setData({
            [`lists[${i}].y`]: temp2
          })
          let temp = this.data.lists[i].s
          this.data.lists[i].s = this.data.lists[this.data.move_index].s
          this.data.lists[this.data.move_index].s = temp
          this.data.Y = change
          return
        }
      }
    }
  },
  end () {
    this.setData({
      animation: false
    })
    let that = this
    this.data.Y = -1
    let s = that.data.lists.sort((a, b) => { return a.y - b.y })
    for (let [i, v] of s.entries()) {
      v.s = i
    }
    this.setData({
      lists: s,
      move_index: -1
    })
  },
  longpress (e) {
    this.setData({
      long_index: e.currentTarget.dataset.index,
      long_mask: true
    })
  },
  btnChoose (e) {
    if (!e.detail.value.tx) return app.setToast(this, {content: '请输入内容'})
    if (e.detail.target.dataset.type === 'confirm') {
      this.setData({
        [`lists[${this.data.long_index}].t`]: e.detail.value.tx
      })
    }
    this.setData({
      long_mask: false
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad () {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload () {
    // TODO: onUnload
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh () {
  }
})


评分

参与人数 1原创 +1 浮云 +8 收起 理由
天下钞票 + 1 + 8 很给力!

查看全部评分

天气查询小程序,欢迎大家使用,后续会有更多的功能融合进来
                              我的小小网站
         

也有问题咨询可加vx: jwq782108446
666666
还不错 看看先
我想要学习一下
看看效果
行代码,轻松实现拖拽表单,效果流畅 [修改]
太赞了
走过路过
学习一下咯

学习一下咯
看看看看卡卡
赞美dalao,去年想做一个类似功能的列表,搞了好久勉勉强强搞了个能用的,收藏一下dalao这个,研究一下
{:2_216:}{:2_216:}
感谢分享
学习学习
123下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册