用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

20

主題

164

帖子

1745

積分

布道者

城市天氣查詢小程序

Rank: 6Rank: 6

積分
1745
QQ
本帖最后由 jwq782108446 于 2019-4-30 13:02 編輯

因項目需要,要在小程序上實現一個用戶可以自定義列表順序的需求,產生了如下內容
兩種實現方式:
第一種
-- 通過css修改坐標值實現拖拽效果,但會導致頻繁setdata影響性能

第二種

-- 使用官方組件movable進行實現,效果流程
--  設計思路:實際上拖拽變化的只有被拖拽元素它滑動方向的最近的一個元素發生位置交換,我們只需要在合理的位置去出發更新數據交換這兩個元素的位置即可

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

個人小程序推廣下
項目地址: https://github.com/Say-hi/wx-Map



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 很給力!

查看全部評分

分享至 : QQ空間
7 人收藏
天氣查詢小程序,歡迎大家使用,后續會有更多的功能融合進來
                              我的小小網站
         

也有問題咨詢可加vx: jwq782108446
666666
還不錯 看看先
我想要學習一下
2019-5-8 13:03:17 wjust51 攻城獅
5#
看看效果
行代碼,輕松實現拖拽表單,效果流暢 [修改]
太贊了
走過路過
學習一下咯

學習一下咯
2019-5-17 15:35:52 w往東87 攻城獅
11#
看看看看卡卡
2019-5-20 15:16:49 Wasureru 架構獅
12#
贊美dalao,去年想做一個類似功能的列表,搞了好久勉勉強強搞了個能用的,收藏一下dalao這個,研究一下
{:2_216:}{:2_216:}
感謝分享
2019-5-22 09:09:03 zhangboo 攻城獅
15#
學習學習
123下一頁
發新帖
您需要登錄后才可以回帖 登錄 | 立即注冊
致青春APP 快乐12选5投注技巧 六肖公式规律 黑龙江11选5在线开奖 足彩4场进球球队来自 大乐透140期开奖现场视频 上海时时乐开奖 qq分分彩趋势图 新疆时时彩5星走势图星 开个电动三轮车店赚钱吗 本溪棋牌网下载 七乐彩和值走势图带连线 极速11选5是私彩吗 江苏快3推荐和值号码 炒尿素真的很赚钱吗 小米手机上那些应用 赚钱 泡泡娱乐扎金花技巧规律