增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
265
tuniao-ui/components/tn-drag/index.wxs
Normal file
265
tuniao-ui/components/tn-drag/index.wxs
Normal file
@@ -0,0 +1,265 @@
|
||||
// 判断是否出界
|
||||
var isOutRange = function(x1, y1, x2, y2, x3, y3) {
|
||||
return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3
|
||||
}
|
||||
var edit = false
|
||||
|
||||
function bool(str) {
|
||||
return str === 'true' || str === true
|
||||
}
|
||||
/**
|
||||
* 排序核心
|
||||
* @param {Object} startKey 开始时位置
|
||||
* @param {Object} endKey 结束时位置
|
||||
* @param {Object} instance wxs内的局部变量快照
|
||||
*/
|
||||
var sortCore = function(startKey, endKey, state) {
|
||||
var basedata = state.basedata
|
||||
var excludeFix = function(sortKey, type) {
|
||||
// fixed 元素位置不会变化, 这里直接用 sortKey 获取，更加便捷
|
||||
if (state.list[sortKey].fixed) {
|
||||
var _sortKey = type ? --sortKey : ++sortKey
|
||||
return excludeFix(sortKey, type)
|
||||
}
|
||||
return sortKey
|
||||
}
|
||||
|
||||
// 先获取到 endKey 对应的 realKey, 防止下面排序过程中该 realKey 被修改
|
||||
var endRealKey = -1
|
||||
state.list.forEach(function(item) {
|
||||
if (item.sortKey === endKey) endRealKey = item.realKey
|
||||
})
|
||||
|
||||
return state.list.map(function(item) {
|
||||
if (item.fixed) return item
|
||||
var sortKey = item.sortKey
|
||||
var realKey = item.realKey
|
||||
|
||||
if (startKey < endKey) {
|
||||
// 正序拖动
|
||||
if (sortKey > startKey && sortKey <= endKey) {
|
||||
--realKey
|
||||
sortKey = excludeFix(--sortKey, true)
|
||||
} else if (sortKey === startKey) {
|
||||
realKey = endRealKey
|
||||
sortKey = endKey
|
||||
}
|
||||
} else if (startKey > endKey) {
|
||||
// 倒序拖动
|
||||
if (sortKey >= endKey && sortKey < startKey) {
|
||||
++realKey
|
||||
sortKey = excludeFix(++sortKey, false)
|
||||
} else if (sortKey === startKey) {
|
||||
realKey = endRealKey
|
||||
sortKey = endKey
|
||||
}
|
||||
}
|
||||
|
||||
if (item.sortKey != sortKey) {
|
||||
item.translateX = (sortKey % basedata.columns) * 100 + '%'
|
||||
item.translateY = Math.floor(sortKey / basedata.columns) * 100 + '%'
|
||||
item.sortKey = sortKey
|
||||
item.realKey = realKey
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
var triggerCustomEvent = function(list, type, instance) {
|
||||
if (!instance) return
|
||||
var _list = [],
|
||||
listData = [];
|
||||
|
||||
list.forEach(function(item) {
|
||||
_list[item.sortKey] = item
|
||||
})
|
||||
_list.forEach(function(item) {
|
||||
listData.push(item.data)
|
||||
})
|
||||
|
||||
// 编译到小程序 funcName作为参数传递导致事件不执行
|
||||
switch(type) {
|
||||
case 'change':
|
||||
instance.callMethod('change', {data: listData})
|
||||
break
|
||||
case 'sortEnd':
|
||||
instance.callMethod('sortEnd', {data: listData})
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
var listObserver = function(newVal, oldVal, ownerInstance, instance) {
|
||||
var state = ownerInstance.getState()
|
||||
state.itemsInstance = ownerInstance.selectAllComponents('.tn-drag__item')
|
||||
|
||||
state.list = newVal || []
|
||||
|
||||
state.list.forEach(function(item, index) {
|
||||
var itemInstance = state.itemsInstance[index]
|
||||
if (item && itemInstance) {
|
||||
itemInstance.setStyle({
|
||||
'transform': 'translate3d('+ item.translateX + ',' + item.translateY +', 0)'
|
||||
})
|
||||
if (item.fixed) itemInstance.addClass('tn-drag__fixed')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var baseDataObserver = function(newVal, oldVal, ownerInstance, instance) {
|
||||
var state = ownerInstance.getState()
|
||||
state.basedata = newVal
|
||||
}
|
||||
|
||||
var longPress = function(event, ownerInstance) {
|
||||
var instance = event.instance
|
||||
var dataset = instance.getDataset()
|
||||
var state = ownerInstance.getState()
|
||||
|
||||
edit = bool(dataset.edit)
|
||||
if (!edit) return
|
||||
if (!state.basedata || state.basedata === 'undefined') {
|
||||
state.basedata = JSON.parse(dataset.basedata)
|
||||
}
|
||||
var basedata = state.basedata
|
||||
var touches = event.changedTouches[0]
|
||||
if (!touches) return
|
||||
|
||||
state.current = +dataset.index
|
||||
|
||||
// 初始项是固定项则返回
|
||||
var item = state.list[state.current]
|
||||
if (item && item.fixed) return
|
||||
|
||||
// 如果已经在 drag 中则返回, 防止多指触发 drag 动作, touchstart 事件中有效果
|
||||
if (state.dragging) return
|
||||
|
||||
ownerInstance.callMethod("drag", {
|
||||
dragging: true
|
||||
})
|
||||
|
||||
// 计算X, Y轴初始位移，使item中心移动到点击处，单列的时候X轴初始不做位移
|
||||
state.translateX = basedata.columns === 1 ? 0 : touches.pageX - (basedata.itemWidth / 2 + basedata.left)
|
||||
state.translateY = touches.pageY - (basedata.itemHeight / 2 + basedata.top)
|
||||
state.touchId = touches.identifier
|
||||
|
||||
instance.setStyle({
|
||||
'transform': 'translate3d(' + state.translateX + 'px,' + state.translateY +'px, 0)'
|
||||
})
|
||||
state.itemsInstance.forEach(function(item, index) {
|
||||
item.removeClass("tn-drag__transition").removeClass("tn-drag__current")
|
||||
item.addClass(index === state.current ? "tn-drag__current" : "tn-drag__transition")
|
||||
})
|
||||
|
||||
ownerInstance.callMethod("vibrate")
|
||||
state.dragging = true
|
||||
}
|
||||
|
||||
var touchStart = function(event, ownerInstance) {
|
||||
var instance = event.instance
|
||||
var dataset = instance.getDataset()
|
||||
edit = bool(dataset.edit)
|
||||
}
|
||||
|
||||
var touchMove = function(event, ownerInstance) {
|
||||
var instance = event.instance
|
||||
var dataset = instance.getDataset()
|
||||
var state = ownerInstance.getState()
|
||||
var basedata = state.basedata
|
||||
|
||||
if (!state.dragging || !edit) return
|
||||
var touches = event.changedTouches[0]
|
||||
if (!touches) return
|
||||
|
||||
// 如果不是同一个触发点则返回
|
||||
if (state.touchId !== touches.identifier) return
|
||||
|
||||
// 计算X,Y轴位移, 单列时候X轴初始不做位移
|
||||
var translateX = basedata.columns === 1 ? 0 : touches.pageX - (basedata.itemWidth / 2 + basedata.left)
|
||||
var translateY = touches.pageY - (basedata.itemHeight / 2 + basedata.top)
|
||||
|
||||
// 到顶到低自动滑动
|
||||
if (touches.clientY > basedata.windowHeight - basedata.itemHeight - basedata.realBottomSize) {
|
||||
// 当前触摸点pageY + item高度 - (屏幕高度 - 底部固定区域高度)
|
||||
ownerInstance.callMethod('pageScroll', {
|
||||
scrollTop: touches.pageY + basedata.itemHeight - (basedata.windowHeight - basedata.realBottomSize)
|
||||
})
|
||||
} else if (touches.clientY < basedata.itemHeight + basedata.realTopSize) {
|
||||
// 当前触摸点pageY - item高度 - 顶部固定区域高
|
||||
ownerInstance.callMethod('pageScroll', {
|
||||
scrollTop: touches.pageY - basedata.itemHeight - basedata.realTopSize
|
||||
})
|
||||
}
|
||||
|
||||
// 设置当前激活元素的偏移量
|
||||
instance.setStyle({
|
||||
'transform': 'translate3d('+ translateX + 'px,' + translateY + 'px, 0)'
|
||||
})
|
||||
|
||||
var startKey = state.list[state.current].sortKey
|
||||
var currentX = Math.round(translateX / basedata.itemWidth)
|
||||
var currentY = Math.round(translateY / basedata.itemHeight)
|
||||
var endKey = currentX + basedata.columns * currentY
|
||||
|
||||
// 目标项时固定项则返回
|
||||
var item = state.list[endKey]
|
||||
if (item && item.fixed) return
|
||||
|
||||
// X轴或者Y轴超出范围则返回
|
||||
if (isOutRange(currentX, basedata.columns, currentY, basedata.rows, endKey, state.list.length)) return
|
||||
|
||||
// 防止拖拽过程中发生乱序问题
|
||||
if (startKey === endKey || startKey === state.preStartKey) return
|
||||
state.preStartKey = startKey
|
||||
|
||||
var list = sortCore(startKey, endKey, state)
|
||||
state.itemsInstance.forEach(function(itemInstance, index) {
|
||||
var item = list[index]
|
||||
if (index !== state.current) {
|
||||
itemInstance.setStyle({
|
||||
'transform': 'translate3d('+ item.translateX + ',' + item.translateY +', 0)'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// ownerInstance.callMethod('vibrate')
|
||||
ownerInstance.callMethod('listDataChange', {
|
||||
data: list
|
||||
})
|
||||
triggerCustomEvent(list, "change", ownerInstance)
|
||||
}
|
||||
|
||||
var touchEnd = function(event, ownerInstance) {
|
||||
var instance = event.instance
|
||||
var dataset = instance.getDataset()
|
||||
var state = ownerInstance.getState()
|
||||
var basedata = state.basedata
|
||||
|
||||
if (!state.dragging || !edit) return
|
||||
triggerCustomEvent(state.list, "sortEnd", ownerInstance)
|
||||
|
||||
instance.addClass('tn-drag__transition')
|
||||
instance.setStyle({
|
||||
'transform': 'translate3d('+ state.list[state.current].translateX + ',' + state.list[state.current].translateY + ', 0)'
|
||||
})
|
||||
state.itemsInstance.forEach(function(item, index) {
|
||||
item.removeClass('tn-drag__transition')
|
||||
})
|
||||
|
||||
state.preStartKey = -1
|
||||
state.dragging = false
|
||||
ownerInstance.callMethod('drag', {
|
||||
dragging: false
|
||||
})
|
||||
state.current = -1
|
||||
state.translateX = 0
|
||||
state.translateY = 0
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
longPress: longPress,
|
||||
touchStart: touchStart,
|
||||
touchMove: touchMove,
|
||||
touchEnd: touchEnd,
|
||||
baseDataObserver: baseDataObserver,
|
||||
listObserver: listObserver
|
||||
}
|
||||
278
tuniao-ui/components/tn-drag/tn-drag.vue
Normal file
278
tuniao-ui/components/tn-drag/tn-drag.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<view
|
||||
class="tn-drag-class tn-drag"
|
||||
:style="{
|
||||
height: wrapHeight + 'rpx'
|
||||
}"
|
||||
:list="listData"
|
||||
:basedata="baseData"
|
||||
:change:list="wxs.listObserver"
|
||||
:change:basedata="wxs.baseDataObserver"
|
||||
>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view
|
||||
v-for="(item, index) in listData"
|
||||
:key="item.id"
|
||||
class="tn-drag__item"
|
||||
:style="{
|
||||
width: 100 / columns + '%',
|
||||
height: itemHeight + 'rpx'
|
||||
}"
|
||||
:data-index="index"
|
||||
:data-basedata="baseData"
|
||||
:data-edit="edit"
|
||||
@longpress="wxs.longPress"
|
||||
@touchstart="wxs.touchStart"
|
||||
:catch:touchmove="dragging?wxs.touchMove:''"
|
||||
:catch:touchend="dragging?wxs.touchEnd:''"
|
||||
>
|
||||
<slot :entity="item.data" :fixed="item.fixed" :index="index" :height="itemHeight" :isEdit="edit"></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view
|
||||
v-for="(item, index) in listData"
|
||||
:key="item.id"
|
||||
class="tn-drag__item"
|
||||
:style="{
|
||||
width: 100 / columns + '%',
|
||||
height: itemHeight + 'rpx'
|
||||
}"
|
||||
@longpress="wxs.longPress"
|
||||
:data-index="index"
|
||||
:data-basedata="baseData"
|
||||
:data-edit="edit"
|
||||
@touchstart="wxs.touchStart"
|
||||
@touchmove="wxs.touchMove"
|
||||
@touchend="wxs.touchEnd"
|
||||
>
|
||||
<slot :entity="item.data" :fixed="item.fixed" :index="index" :height="itemHeight" :isEdit="edit"></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script src="./index.wxs" lang="wxs" module="wxs"></script>
|
||||
<script>
|
||||
export default {
|
||||
name: 'tn-drag',
|
||||
props: {
|
||||
// 数据源
|
||||
// 如果属性中包含fixed，则标识当前数据不允许拖动
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 是否允许拖动编辑
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 列数
|
||||
columns: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
// item元素高度, 单位rpx
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 当前父元素滚动的高度
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapHeight() {
|
||||
return this.rows * this.itemHeight
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 未渲染前节点数据
|
||||
baseData: {},
|
||||
// 拖动后的数据
|
||||
dragData: [],
|
||||
// 行数
|
||||
rows: 0,
|
||||
// 渲染数据
|
||||
listData: [],
|
||||
// 标记是否正在拖动
|
||||
dragging: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list(val) {
|
||||
this.listData = []
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
columns(val) {
|
||||
this.listData = []
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
this.dragging = true
|
||||
const initDragItem = item => {
|
||||
const obj = {
|
||||
...item
|
||||
}
|
||||
const fixed = obj?.fixed || false
|
||||
delete obj["fixed"]
|
||||
return {
|
||||
id: this.unique(),
|
||||
fixed,
|
||||
data: {
|
||||
...obj
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let i = 0
|
||||
const listData = (this.list || []).map((item, index) => {
|
||||
let listItem = initDragItem(item)
|
||||
// 真实排序
|
||||
listItem.realKey = i++
|
||||
// 整体排序
|
||||
listItem.sortKey = index
|
||||
listItem.translateX = `${(listItem.sortKey % this.columns) * 100}%`
|
||||
listItem.translateY = `${Math.floor(listItem.sortKey / this.columns) * 100}%`
|
||||
return listItem
|
||||
})
|
||||
this.rows = Math.ceil(listData.length / this.columns)
|
||||
this.listData = listData
|
||||
this.dragData = listData
|
||||
|
||||
if (listData.length === 0) return
|
||||
// console.log(listData);
|
||||
|
||||
// 初始化dom元素
|
||||
this.$nextTick(() => {
|
||||
this.initRect()
|
||||
})
|
||||
},
|
||||
// 初始化dom元素
|
||||
initRect() {
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight
|
||||
} = uni.getSystemInfoSync()
|
||||
|
||||
let baseData = {}
|
||||
baseData.windowHeight = windowHeight
|
||||
baseData.realTopSize = 0
|
||||
baseData.realBottomSize = 0
|
||||
baseData.columns = this.columns
|
||||
baseData.rows = this.rows
|
||||
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
query.select('.tn-drag').boundingClientRect()
|
||||
query.select('.tn-drag__item').boundingClientRect()
|
||||
query.exec(res => {
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.initRect()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
|
||||
baseData.itemWidth = res[1].width
|
||||
baseData.itemHeight = res[1].height
|
||||
baseData.left = res[0].left
|
||||
baseData.top = res[0].top + this.scrollTop
|
||||
this.dragging = false
|
||||
this.baseData = baseData
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
// 触发震动
|
||||
vibrate() {
|
||||
uni.vibrateShort()
|
||||
},
|
||||
// 滚动到指定的位置
|
||||
pageScroll(e) {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: e.scrollTop,
|
||||
duration: 0
|
||||
})
|
||||
},
|
||||
// 修改拖动状态
|
||||
drag(e) {
|
||||
this.dragging = e.dragging
|
||||
},
|
||||
// 拖拽数据发生改变
|
||||
listDataChange(e) {
|
||||
this.dragData = e.data
|
||||
},
|
||||
// item被点击
|
||||
itemClick(index) {
|
||||
const item = this.dragData[index]
|
||||
this.$emit('click', {
|
||||
key: item.realKey,
|
||||
data: item.data
|
||||
})
|
||||
},
|
||||
|
||||
// 拖拽结束事件
|
||||
sortEnd(e) {
|
||||
this.$emit('end', {
|
||||
data: e.data
|
||||
})
|
||||
},
|
||||
// 排序发生改变事件
|
||||
change(e) {
|
||||
this.$emit('change', {
|
||||
data: e.data
|
||||
})
|
||||
},
|
||||
|
||||
// 生成元素唯一id
|
||||
unique(n = 6) {
|
||||
let id = ''
|
||||
for (let i = 0; i < n; i++) id += Math.floor(Math.random() * 10)
|
||||
return 'tn_' + new Date().getTime() + id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tn-drag {
|
||||
position: relative;
|
||||
|
||||
&__item {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__transition {
|
||||
transition: transform 0.25s !important;
|
||||
}
|
||||
|
||||
&__current {
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
&__fixed {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user