大理市民卡小程序1.0提交
diff --git a/weui/slideview/slideview.js b/weui/slideview/slideview.js
new file mode 100644
index 0000000..50b239e
--- /dev/null
+++ b/weui/slideview/slideview.js
@@ -0,0 +1,205 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ // The module cache
+/******/ var 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)
+/******/ var 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;
+/******/ var ns = Object.create(null);
+/******/ __webpack_require__.r(ns);
+/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ if(mode & 2 && typeof value != 'string') for(var 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) {
+/******/ var 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__) {
+
+"use strict";
+
+
+Component({
+ options: {
+ addGlobalClass: true,
+ multipleSlots: true
+ },
+ properties: {
+ extClass: {
+ type: String,
+ value: ''
+ },
+ buttons: {
+ type: Array,
+ value: [],
+ observer: function observer(newVal) {
+ 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: function ready() {
+ this.updateRight();
+ this.addClassNameForButton();
+ },
+
+ methods: {
+ updateRight: function updateRight() {
+ var _this = this;
+
+ var data = this.data;
+ var query = wx.createSelectorQuery().in(this);
+ query.select('.left').boundingClientRect(function (res) {
+ console.log('right res', res);
+ var btnQuery = wx.createSelectorQuery().in(_this);
+ btnQuery.selectAll('.btn').boundingClientRect(function (rects) {
+ console.log('btn rects', rects);
+ _this.setData({
+ size: {
+ buttons: rects,
+ button: res,
+ show: data.show,
+ disable: data.disable,
+ throttle: data.throttle,
+ rebounce: data.rebounce
+ }
+ });
+ }).exec();
+ }).exec();
+ },
+ addClassNameForButton: function addClassNameForButton() {
+ var _data = this.data,
+ buttons = _data.buttons,
+ icon = _data.icon;
+
+ buttons.forEach(function (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: buttons
+ });
+ },
+ buttonTapByWxs: function buttonTapByWxs(data) {
+ this.triggerEvent('buttontap', data, {});
+ },
+ hide: function hide() {
+ this.triggerEvent('hide', {}, {});
+ },
+ show: function show() {
+ this.triggerEvent('show', {}, {});
+ },
+ transitionEnd: function transitionEnd() {
+ console.log('transitiion end');
+ }
+ }
+});
+
+/***/ })
+
+/******/ });
\ No newline at end of file
diff --git a/weui/slideview/slideview.json b/weui/slideview/slideview.json
new file mode 100644
index 0000000..e8cfaaf
--- /dev/null
+++ b/weui/slideview/slideview.json
@@ -0,0 +1,4 @@
+{
+ "component": true,
+ "usingComponents": {}
+}
\ No newline at end of file
diff --git a/weui/slideview/slideview.wxml b/weui/slideview/slideview.wxml
new file mode 100644
index 0000000..f906edf
--- /dev/null
+++ b/weui/slideview/slideview.wxml
@@ -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}}" 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>
diff --git a/weui/slideview/slideview.wxs b/weui/slideview/slideview.wxs
new file mode 100644
index 0000000..c62d085
--- /dev/null
+++ b/weui/slideview/slideview.wxs
@@ -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
+}
\ No newline at end of file
diff --git a/weui/slideview/slideview.wxss b/weui/slideview/slideview.wxss
new file mode 100644
index 0000000..0129c65
--- /dev/null
+++ b/weui/slideview/slideview.wxss
@@ -0,0 +1 @@
+:host{width:100%}.weui-slideview{overflow:hidden;position:relative}.weui-slideview{position:relative}.weui-slideview__left{position:relative;z-index:10}.weui-slideview__right{position:absolute;z-index:1;left:100%;top:0;height:100%}.weui-slideview__btn__wrp{position:absolute;left:0;bottom:0;text-align:center;min-width:69px;height:100%;white-space:nowrap}.weui-slideview__btn{color:#FFFFFF;padding:0 17px}.weui-slideview__btn-group_default .weui-slideview__btn{background:#C7C7CC}.weui-slideview__btn-group_default~.weui-slideview__btn-group_default:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #FFFFFF;color:#FFFFFF}.weui-slideview__btn-group_default:first-child:before{display:none}.weui-slideview__btn-group_warn .weui-slideview__btn{background:#FE3B30}.weui-slideview__btn-group_warn~.weui-slideview__btn-group_warn:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #FFFFFF;color:#FFFFFF}.weui-slideview__btn-group_warn:first-child:before{display:none}.weui-slideview_icon .weui-slideview__btn__wrp{background:transparent;font-size:0}.weui-slideview_icon .weui-slideview__btn__wrp:after{content:"";width:0;height:100%;vertical-align:middle;display:inline-block}.weui-slideview_icon .weui-slideview__btn__wrp:first-child{padding-left:16px}.weui-slideview_icon .weui-slideview__btn__wrp:last-child{padding-right:8px}.weui-slideview_icon .weui-slideview__btn{width:48px;height:48px;line-height:48px;padding:0;display:inline-block;vertical-align:middle;border-radius:50%;background-color:#FFFFFF}.weui-slideview_icon .weui-slideview__btn__icon{display:inline-block;vertical-align:middle;width:22px;height:22px}
\ No newline at end of file