mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-06 23:25:06 +08:00
初始化管理后台的 uniapp 版本
This commit is contained in:
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="uni-list uni-border-top-bottom">
|
||||
<view v-if="border" class="uni-list--border-top"></view>
|
||||
<slot />
|
||||
<view v-if="border" class="uni-list--border-bottom"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* List 列表
|
||||
* @description 列表组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
||||
* @property {String} border = [true|false] 标题
|
||||
*/
|
||||
export default {
|
||||
name: 'uniList',
|
||||
'mp-weixin': {
|
||||
options: {
|
||||
multipleSlots: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
enableBackToTop: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
scrollY: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// list: this
|
||||
// };
|
||||
// },
|
||||
created() {
|
||||
this.firstChildAppend = false;
|
||||
},
|
||||
methods: {
|
||||
loadMore(e) {
|
||||
this.$emit('scrolltolower');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-border-color:#e5e5e5;
|
||||
.uni-list {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
background-color: $uni-bg-color;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-list--border {
|
||||
position: relative;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-top-color: $uni-border-color;
|
||||
border-top-style: solid;
|
||||
border-top-width: 0.5px;
|
||||
border-bottom-color: $uni-border-color;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.5px;
|
||||
/* #endif */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
|
||||
.uni-list--border-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
background-color: $uni-border-color;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.uni-list--border-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
background-color: $uni-border-color;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
|
||||
<slot />
|
||||
</refresh>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view ref="uni-refresh" class="uni-refresh" v-show="isShow">
|
||||
<slot />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UniRefresh',
|
||||
props: {
|
||||
display: {
|
||||
type: [String],
|
||||
default: "hide"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pulling: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShow() {
|
||||
if (this.display === "show" || this.pulling === true) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
onchange(value) {
|
||||
this.pulling = value;
|
||||
},
|
||||
onrefresh(e) {
|
||||
this.$emit("refresh", e);
|
||||
},
|
||||
onpullingdown(e) {
|
||||
// #ifdef APP-NVUE
|
||||
this.$emit("pullingdown", e);
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
var detail = {
|
||||
viewHeight: 90,
|
||||
pullingDistance: e.height
|
||||
}
|
||||
this.$emit("pullingdown", detail);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-refresh {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,87 @@
|
||||
var pullDown = {
|
||||
threshold: 95,
|
||||
maxHeight: 200,
|
||||
callRefresh: 'onrefresh',
|
||||
callPullingDown: 'onpullingdown',
|
||||
refreshSelector: '.uni-refresh'
|
||||
};
|
||||
|
||||
function ready(newValue, oldValue, ownerInstance, instance) {
|
||||
var state = instance.getState()
|
||||
state.canPullDown = newValue;
|
||||
// console.log(newValue);
|
||||
}
|
||||
|
||||
function touchStart(e, instance) {
|
||||
var state = instance.getState();
|
||||
state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
|
||||
state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
|
||||
if (!state.canPullDown) {
|
||||
return
|
||||
}
|
||||
|
||||
// console.log("touchStart");
|
||||
|
||||
state.height = 0;
|
||||
state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
||||
state.refreshInstance.setStyle({
|
||||
'height': 0
|
||||
});
|
||||
state.refreshInstance.callMethod("onchange", true);
|
||||
}
|
||||
|
||||
function touchMove(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var state = instance.getState();
|
||||
if (!state.canPullDown) {
|
||||
return
|
||||
}
|
||||
|
||||
var oldHeight = state.height;
|
||||
var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
||||
var height = endY - state.touchStartY;
|
||||
if (height > pullDown.maxHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
var refreshInstance = state.refreshInstance;
|
||||
refreshInstance.setStyle({
|
||||
'height': height + 'px'
|
||||
});
|
||||
|
||||
height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
|
||||
state.height = height;
|
||||
refreshInstance.callMethod(pullDown.callPullingDown, {
|
||||
height: height
|
||||
});
|
||||
}
|
||||
|
||||
function touchEnd(e, ownerInstance) {
|
||||
var state = e.instance.getState();
|
||||
if (!state.canPullDown) {
|
||||
return
|
||||
}
|
||||
|
||||
state.refreshInstance.callMethod("onchange", false);
|
||||
|
||||
var refreshInstance = state.refreshInstance;
|
||||
if (state.height > pullDown.threshold) {
|
||||
refreshInstance.callMethod(pullDown.callRefresh);
|
||||
return;
|
||||
}
|
||||
|
||||
refreshInstance.setStyle({
|
||||
'height': 0
|
||||
});
|
||||
}
|
||||
|
||||
function propObserver(newValue, oldValue, instance) {
|
||||
pullDown = newValue;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
touchmove: touchMove,
|
||||
touchstart: touchStart,
|
||||
touchend: touchEnd,
|
||||
propObserver: propObserver
|
||||
}
|
Reference in New Issue
Block a user