初始化
This commit is contained in:
@@ -0,0 +1,199 @@
|
||||
module.exports =
|
||||
/** *** */ (function (modules) { // webpackBootstrap
|
||||
/** *** */ // The module cache
|
||||
/** *** */ const installedModules = {}
|
||||
/** *** */
|
||||
/** *** */ // The require function
|
||||
/** *** */ function __webpack_require__(moduleId) {
|
||||
/** *** */
|
||||
/** *** */ // Check if module is in cache
|
||||
/** *** */ if (installedModules[moduleId]) {
|
||||
/** *** */ return installedModules[moduleId].exports
|
||||
/** *** */ }
|
||||
/** *** */ // Create a new module (and put it into the cache)
|
||||
/** *** */ const module = installedModules[moduleId] = {
|
||||
/** *** */ i: moduleId,
|
||||
/** *** */ l: false,
|
||||
/** *** */ exports: {}
|
||||
/** *** */}
|
||||
/** *** */
|
||||
/** *** */ // Execute the module function
|
||||
/** *** */ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
|
||||
/** *** */
|
||||
/** *** */ // Flag the module as loaded
|
||||
/** *** */ module.l = true
|
||||
/** *** */
|
||||
/** *** */ // Return the exports of the module
|
||||
/** *** */ return module.exports
|
||||
/** *** */ }
|
||||
/** *** */
|
||||
/** *** */
|
||||
/** *** */ // expose the modules object (__webpack_modules__)
|
||||
/** *** */ __webpack_require__.m = modules
|
||||
/** *** */
|
||||
/** *** */ // expose the module cache
|
||||
/** *** */ __webpack_require__.c = installedModules
|
||||
/** *** */
|
||||
/** *** */ // define getter function for harmony exports
|
||||
/** *** */ __webpack_require__.d = function (exports, name, getter) {
|
||||
/** *** */ if (!__webpack_require__.o(exports, name)) {
|
||||
/** *** */ Object.defineProperty(exports, name, {enumerable: true, get: getter})
|
||||
/** *** */ }
|
||||
/** *** */ }
|
||||
/** *** */
|
||||
/** *** */ // define __esModule on exports
|
||||
/** *** */ __webpack_require__.r = function (exports) {
|
||||
/** *** */ if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||
/** *** */ Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'})
|
||||
/** *** */ }
|
||||
/** *** */ Object.defineProperty(exports, '__esModule', {value: true})
|
||||
/** *** */ }
|
||||
/** *** */
|
||||
/** *** */ // create a fake namespace object
|
||||
/** *** */ // mode & 1: value is a module id, require it
|
||||
/** *** */ // mode & 2: merge all properties of value into the ns
|
||||
/** *** */ // mode & 4: return value when already ns object
|
||||
/** *** */ // mode & 8|1: behave like require
|
||||
/** *** */ __webpack_require__.t = function (value, mode) {
|
||||
/** *** */ if (mode & 1) value = __webpack_require__(value)
|
||||
/** *** */ if (mode & 8) return value
|
||||
/** *** */ if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value
|
||||
/** *** */ const ns = Object.create(null)
|
||||
/** *** */ __webpack_require__.r(ns)
|
||||
/** *** */ Object.defineProperty(ns, 'default', {enumerable: true, value})
|
||||
/** *** */ if (mode & 2 && typeof value !== 'string') for (const key in value) __webpack_require__.d(ns, key, function (key) { return value[key] }.bind(null, key))
|
||||
/** *** */ return ns
|
||||
/** *** */ }
|
||||
/** *** */
|
||||
/** *** */ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/** *** */ __webpack_require__.n = function (module) {
|
||||
/** *** */ const getter = module && module.__esModule
|
||||
/** *** */ ? function getDefault() { return module.default }
|
||||
/** *** */ : function getModuleExports() { return module }
|
||||
/** *** */ __webpack_require__.d(getter, 'a', getter)
|
||||
/** *** */ return getter
|
||||
/** *** */ }
|
||||
/** *** */
|
||||
/** *** */ // Object.prototype.hasOwnProperty.call
|
||||
/** *** */ __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property) }
|
||||
/** *** */
|
||||
/** *** */ // __webpack_public_path__
|
||||
/** *** */ __webpack_require__.p = ''
|
||||
/** *** */
|
||||
/** *** */
|
||||
/** *** */ // Load entry module and return exports
|
||||
/** *** */ return __webpack_require__(__webpack_require__.s = 18)
|
||||
/** *** */ }({
|
||||
|
||||
/***/ 18:
|
||||
/***/ (function (module, exports, __webpack_require__) {
|
||||
Component({
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
multipleSlots: true
|
||||
},
|
||||
properties: {
|
||||
extClass: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
buttons: {
|
||||
type: Array,
|
||||
value: [],
|
||||
// type, data, text, src, extClass
|
||||
observer() {
|
||||
this.addClassNameForButton()
|
||||
}
|
||||
|
||||
},
|
||||
disable: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
icon: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 350
|
||||
},
|
||||
throttle: {
|
||||
type: Number,
|
||||
value: 40
|
||||
},
|
||||
rebounce: {
|
||||
type: Number,
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
data: {
|
||||
size: null
|
||||
},
|
||||
ready() {
|
||||
// @ts-ignore
|
||||
this.updateRight()
|
||||
this.addClassNameForButton()
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateRight() {
|
||||
// 获取右侧滑动显示区域的宽度
|
||||
const data = this.data
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query.select('.left').boundingClientRect(res => {
|
||||
const btnQuery = wx.createSelectorQuery().in(this)
|
||||
btnQuery.selectAll('.btn').boundingClientRect(rects => {
|
||||
this.setData({
|
||||
size: {
|
||||
buttons: rects,
|
||||
button: res,
|
||||
show: data.show,
|
||||
disable: data.disable,
|
||||
throttle: data.throttle,
|
||||
rebounce: data.rebounce
|
||||
}
|
||||
})
|
||||
}).exec()
|
||||
}).exec()
|
||||
},
|
||||
addClassNameForButton() {
|
||||
// @ts-ignore
|
||||
const {
|
||||
buttons,
|
||||
icon
|
||||
} = this.data
|
||||
buttons.forEach(btn => {
|
||||
if (icon) {
|
||||
btn.className = ''
|
||||
} else if (btn.type === 'warn') {
|
||||
btn.className = 'weui-slideview__btn-group_warn'
|
||||
} else {
|
||||
btn.className = 'weui-slideview__btn-group_default'
|
||||
}
|
||||
})
|
||||
this.setData({
|
||||
buttons
|
||||
})
|
||||
},
|
||||
buttonTapByWxs(data) {
|
||||
this.triggerEvent('buttontap', data, {})
|
||||
},
|
||||
hide() {
|
||||
this.triggerEvent('hide', {}, {})
|
||||
},
|
||||
show() {
|
||||
this.triggerEvent('show', {}, {})
|
||||
},
|
||||
|
||||
transitionEnd() {}
|
||||
|
||||
}
|
||||
})
|
||||
/***/ })
|
||||
|
||||
/** *** */}))
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<!-- slide-view/slide-view.wxml -->
|
||||
<wxs module="handler" src="./slideview.wxs"></wxs>
|
||||
<view class="weui-slideview weui-movable-view {{icon ? 'weui-slideview_icon' : ''}} {{extClass}}" style="width: 100%;height: 100%;">
|
||||
<view bindtransitionend="{{handler.transitionEnd}}"
|
||||
show="{{show}}" change:show="{{handler.showChange}}"
|
||||
rebounce="{{rebounce}}" change:rebounce="{{handler.rebounceChange}}"
|
||||
duration="{{duration}}" change:duration="{{handler.durationChange}}"
|
||||
change:disable="{{handler.disableChange}}" disable="{{disable}}"
|
||||
change:prop="{{handler.sizeReady}}" prop="{{size}}"
|
||||
bindtouchstart="{{handler.touchstart}}" bindtouchmove="{{handler.touchmove}}" bindtouchend="{{handler.touchend}}" class="weui-slideview__left left" style="width:100%;">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="weui-slideview__right right">
|
||||
<view class="weui-slideview__buttons" style="height:100%;width:100%;" wx:if="{{buttons && buttons.length}}">
|
||||
<view wx:for="{{buttons}}" wx:key="index" class='btn weui-slideview__btn__wrp {{item.className}} {{item.extClass}}'>
|
||||
<view bindtap="{{handler.hideButton}}" data-data="{{item.data}}" data-index="{{index}}" class='weui-slideview__btn'>
|
||||
<text wx:if="{{!icon}}">{{item.text}}</text>
|
||||
<image class="weui-slideview__btn__icon" wx:else src="{{item.src}}"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,243 @@
|
||||
/* eslint-disable */
|
||||
var touchstart = function(event, ownerInstance) {
|
||||
var ins = event.instance
|
||||
var st = ins.getState()
|
||||
if (st.disable) return // disable的逻辑
|
||||
// console.log('touchstart st', JSON.stringify(st))
|
||||
if (!st.size) return
|
||||
// console.log('touchstart', JSON.stringify(event))
|
||||
st.isMoving = true
|
||||
st.startX = event.touches[0].pageX
|
||||
st.startY = event.touches[0].pageY
|
||||
st.firstAngle = 0
|
||||
}
|
||||
var touchmove = function(event, ownerInstance) {
|
||||
var ins = event.instance
|
||||
var st = ins.getState()
|
||||
if (!st.size || !st.isMoving) return
|
||||
// console.log('touchmove', JSON.stringify(event))
|
||||
var pagex = event.touches[0].pageX - st.startX
|
||||
var pagey = event.touches[0].pageY - st.startY
|
||||
// 左侧45度角为界限,大于45度则允许水平滑动
|
||||
if (st.firstAngle === 0) {
|
||||
st.firstAngle = Math.abs(pagex) - Math.abs(pagey)
|
||||
}
|
||||
if (st.firstAngle < 0) {
|
||||
return
|
||||
}
|
||||
var movex = pagex > 0 ? Math.min(st.max, pagex) : Math.max(-st.max, pagex)
|
||||
// 往回滑动的情况
|
||||
if (st.out) {
|
||||
// 已经是划出来了,还要往左滑动,忽略
|
||||
if (movex < 0) return
|
||||
ins.setStyle({
|
||||
'transform': 'translateX(' + (st.transformx + movex) + 'px)',
|
||||
'transition': ''
|
||||
})
|
||||
var btns = ownerInstance.selectAllComponents('.btn')
|
||||
var transformTotal = 0
|
||||
var len = btns.length
|
||||
var i = len - 1;
|
||||
for (;i >= 0; i--) {
|
||||
var transform = st.size.buttons[i].width / st.max * movex
|
||||
var transformx = st.size.buttons[i].max - Math.min(st.size.buttons[i].max, transform + transformTotal)
|
||||
btns[i].setStyle({
|
||||
'transform': 'translateX(' + (-transformx) + 'px)',
|
||||
'transition': ''
|
||||
})
|
||||
transformTotal += transform
|
||||
}
|
||||
return false
|
||||
}
|
||||
if (movex > 0) movex = 0
|
||||
ins.setStyle({
|
||||
'transform': 'translateX(' + movex + 'px)',
|
||||
'transition': ''
|
||||
})
|
||||
st.transformx = movex
|
||||
var btns = ownerInstance.selectAllComponents('.btn')
|
||||
var transformTotal = 0
|
||||
var len = btns.length
|
||||
var i = len - 1;
|
||||
for (;i >= 0; i--) {
|
||||
var transform = st.size.buttons[i].width / st.max * movex
|
||||
var transformx = Math.max(-st.size.buttons[i].max, transform + transformTotal)
|
||||
btns[i].setStyle({
|
||||
'transform': 'translateX(' + transformx + 'px)',
|
||||
'transition': ''
|
||||
})
|
||||
st.size.buttons[i].transformx = transformx
|
||||
transformTotal += transform
|
||||
}
|
||||
return false // 禁止垂直方向的滑动
|
||||
}
|
||||
var touchend = function(event, ownerInstance) {
|
||||
var ins = event.instance
|
||||
var st = ins.getState()
|
||||
if (!st.size || !st.isMoving) return
|
||||
// 左侧45度角为界限,大于45度则允许水平滑动
|
||||
if (st.firstAngle < 0) {
|
||||
return
|
||||
}
|
||||
var duration = st.duration / 1000
|
||||
st.isMoving = false
|
||||
// console.log('touchend', JSON.stringify(event))
|
||||
var btns = ownerInstance.selectAllComponents('.btn')
|
||||
var len = btns.length
|
||||
var i = len - 1
|
||||
// console.log('len size', len)
|
||||
if (Math.abs(event.changedTouches[0].pageX - st.startX) < st.throttle || event.changedTouches[0].pageX - st.startX > 0) { // 方向也要控制
|
||||
st.out = false
|
||||
ins.setStyle({
|
||||
'transform': 'translate3d(0px, 0, 0)',
|
||||
'transition': 'transform ' + (duration) + 's'
|
||||
})
|
||||
for (;i >= 0; i--) {
|
||||
btns[i].setStyle({
|
||||
'transform': 'translate3d(0px, 0, 0)',
|
||||
'transition': 'transform ' + (duration) + 's'
|
||||
})
|
||||
}
|
||||
ownerInstance.callMethod('hide')
|
||||
return
|
||||
}
|
||||
showButtons(ins, ownerInstance, duration)
|
||||
ownerInstance.callMethod('show')
|
||||
}
|
||||
var REBOUNCE_TIME = 0.2
|
||||
var showButtons = function(ins, ownerInstance, withDuration) {
|
||||
var st = ins.getState()
|
||||
if (!st.size) return
|
||||
var rebounceTime = st.rebounce ? REBOUNCE_TIME : 0
|
||||
var movex = st.max
|
||||
st.out = true
|
||||
var btns = ownerInstance.selectAllComponents('.btn')
|
||||
var rebounce = st.rebounce || 0
|
||||
var len = btns.length
|
||||
var i = len - 1
|
||||
ins.setStyle({
|
||||
'transform': 'translate3d(' + (-movex - rebounce) + 'px, 0, 0)',
|
||||
'transition': 'transform ' + (withDuration) + 's'
|
||||
})
|
||||
st.transformx = -movex
|
||||
var transformTotal = 0
|
||||
for (;i >= 0; i--) {
|
||||
var transform = st.size.buttons[i].width / st.max * movex
|
||||
var transformx = (-(transform + transformTotal))
|
||||
btns[i].setStyle({
|
||||
'transform': 'translate3d(' + transformx + 'px, 0, 0)',
|
||||
'transition': 'transform ' + (withDuration ? withDuration + rebounceTime : withDuration) + 's'
|
||||
})
|
||||
st.size.buttons[i].transformx = transformx
|
||||
transformTotal += transform
|
||||
}
|
||||
}
|
||||
var innerHideButton = function(ownerInstance) {
|
||||
var ins = ownerInstance.selectComponent('.left')
|
||||
var st = ins.getState()
|
||||
if (!st.size) return
|
||||
var duration = st.duration ? st.duration / 1000 : 0
|
||||
var btns = ownerInstance.selectAllComponents('.btn')
|
||||
var len = btns.length
|
||||
var i = len - 1
|
||||
ins.setStyle({
|
||||
'transform': 'translate3d(0px, 0, 0)',
|
||||
'transition': 'transform ' + (duration) + 's'
|
||||
})
|
||||
st.transformx = 0
|
||||
for (;i >= 0; i--) {
|
||||
btns[i].setStyle({
|
||||
'transform': 'translate3d(0px, 0, 0)',
|
||||
'transition': 'transform ' + (duration) + 's'
|
||||
})
|
||||
st.size.buttons[i].transformx = 0
|
||||
}
|
||||
}
|
||||
var hideButton = function(event, ownerInstance) {
|
||||
innerHideButton(ownerInstance)
|
||||
ownerInstance.callMethod('buttonTapByWxs', {index: event.currentTarget.dataset.index, data: event.currentTarget.dataset.data})
|
||||
return false
|
||||
}
|
||||
var sizeReady = function(newVal, oldVal, ownerInstance, ins) {
|
||||
var st = ins.getState()
|
||||
// st.disable = newVal && newVal.disable
|
||||
if (newVal && newVal.button && newVal.buttons) {
|
||||
st.size = newVal
|
||||
st.transformx = 0
|
||||
// var min = newVal.button.width
|
||||
var max = 0
|
||||
var len = newVal.buttons.length
|
||||
var i = newVal.buttons.length - 1;
|
||||
var total = 0
|
||||
for (; i >= 0; i--) {
|
||||
max += newVal.buttons[i].width
|
||||
// if (min > newVal.buttons[i]) {
|
||||
// min = newVal.buttons[i].width
|
||||
// }
|
||||
total += newVal.buttons[i].width
|
||||
newVal.buttons[i].max = total
|
||||
newVal.buttons[i].transformx = 0
|
||||
}
|
||||
st.throttle = st.size.throttle || 40 // 固定值
|
||||
st.rebounce = st.size.rebounce
|
||||
st.max = max
|
||||
ownerInstance.selectComponent('.right').setStyle({
|
||||
'line-height': newVal.button.height + 'px',
|
||||
left: (newVal.button.width) + 'px',
|
||||
width: max + 'px'
|
||||
})
|
||||
// console.log('st size', JSON.stringify(newVal))
|
||||
if (!st.size.disable && st.size.show) {
|
||||
showButtons(ins, ownerInstance)
|
||||
}
|
||||
}
|
||||
}
|
||||
var disableChange = function(newVal, oldVal, ownerInstance, ins) {
|
||||
var st = ins.getState()
|
||||
st.disable = newVal
|
||||
}
|
||||
var durationChange = function(newVal, oldVal, ownerInstance, ins) {
|
||||
var st = ins.getState()
|
||||
st.duration = newVal || 400
|
||||
}
|
||||
var showChange = function(newVal, oldVal, ownerInstance, ins) {
|
||||
var st = ins.getState()
|
||||
st.show = newVal
|
||||
if (st.disable) return
|
||||
// console.log('show change')
|
||||
if (st.show) {
|
||||
showButtons(ins, ownerInstance, st.duration)
|
||||
} else {
|
||||
innerHideButton(ownerInstance)
|
||||
}
|
||||
}
|
||||
var rebounceChange = function(newVal, oldVal, ownerInstance, ins) {
|
||||
var st = ins.getState()
|
||||
// console.log('rebounce', st.rebounce)
|
||||
st.rebounce = newVal
|
||||
}
|
||||
var transitionEnd = function(event, ownerInstance) {
|
||||
// console.log('transition')
|
||||
var ins = event.instance
|
||||
var st = ins.getState()
|
||||
// 回弹效果
|
||||
if (st.out && st.rebounce) {
|
||||
console.log('transition rebounce', st.rebounce)
|
||||
ins.setStyle({
|
||||
'transform': 'translate3d(' + (-st.max) + 'px, 0, 0)',
|
||||
'transition': 'transform ' + REBOUNCE_TIME +'s'
|
||||
})
|
||||
}
|
||||
}
|
||||
module.exports = {
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend,
|
||||
hideButton: hideButton,
|
||||
sizeReady: sizeReady,
|
||||
disableChange: disableChange,
|
||||
durationChange: durationChange,
|
||||
showChange: showChange,
|
||||
rebounceChange: rebounceChange,
|
||||
transitionEnd: transitionEnd
|
||||
}
|
||||
Reference in New Issue
Block a user