123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424 |
- <template>
- <view class="mescroll-uni-warp">
- <scroll-view :id="viewId" class="mescroll-uni" :class="{'mescroll-uni-fixed':isFixed}" :style="{'height':scrollHeight,'padding-top':padTop,'padding-bottom':padBottom,'top':fixedTop,'bottom':fixedBottom}" :scroll-top="scrollTop" :scroll-with-animation="scrollAnim" @scroll="scroll" :scroll-y='scrollable' :enable-back-to-top="true" :throttle="false">
- <view class="mescroll-uni-content mescroll-render-touch"
- @touchstart="wxsBiz.touchstartEvent"
- @touchmove="wxsBiz.touchmoveEvent"
- @touchend="wxsBiz.touchendEvent"
- @touchcancel="wxsBiz.touchendEvent"
- :change:prop="wxsBiz.propObserver"
- :prop="wxsProp">
-
- <view v-if="topbar&&statusBarHeight" class="mescroll-topbar" :style="{height: statusBarHeight+'px', background: topbar}"></view>
-
- <view class="mescroll-wxs-content" :style="{'transform': translateY, 'transition': transition}" :change:prop="wxsBiz.callObserver" :prop="callProp">
-
-
- <view v-if="mescroll.optDown.use" class="mescroll-downwarp" :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}">
- <view class="downwarp-content">
- <view class="downwarp-progress mescroll-wxs-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mescroll.optDown.textColor, 'transform': downRotate}"></view>
- <view class="downwarp-tip">{{downText}}</view>
- </view>
- </view>
-
- <slot></slot>
-
- <mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty>
-
-
- <view v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" class="mescroll-upwarp" :style="{'background':mescroll.optUp.bgColor,'color':mescroll.optUp.textColor}">
-
- <view v-show="upLoadType===1">
- <view class="upwarp-progress mescroll-rotate" :style="{'border-color':mescroll.optUp.textColor}"></view>
- <view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
- </view>
-
- <view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
- </view>
- </view>
-
-
-
- <view v-if="bottombar && windowBottom>0" class="mescroll-bottombar" :style="{height: windowBottom+'px'}"></view>
-
-
-
- <view v-if="safearea" class="mescroll-safearea"></view>
- </view>
- </scroll-view>
-
- <mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
-
-
-
- <view :change:prop="renderBiz.propObserver" :prop="wxsProp"></view>
-
- </view>
- </template>
- <script src="./wxs/wxs.wxs" module="wxsBiz" lang="wxs"></script>
- <script module="renderBiz" lang="renderjs">
- import renderBiz from './wxs/renderjs.js';
- export default {
- mixins:[renderBiz]
- }
- </script>
- <script>
-
- import MeScroll from './mescroll-uni.js';
-
- import GlobalOption from './mescroll-uni-option.js';
-
- import MescrollEmpty from './components/mescroll-empty.vue';
-
- import MescrollTop from './components/mescroll-top.vue';
-
- import WxsMixin from './wxs/mixins.js';
-
- export default {
- mixins: [WxsMixin],
- components: {
- MescrollEmpty,
- MescrollTop
- },
- data() {
- return {
- mescroll: {optDown:{},optUp:{}},
- viewId: 'id_' + Math.random().toString(36).substr(2,16),
- downHight: 0,
- downRate: 0,
- downLoadType: 0,
- upLoadType: 0,
- isShowEmpty: false,
- isShowToTop: false,
- scrollTop: 0,
- scrollAnim: false,
- windowTop: 0,
- windowBottom: 0,
- windowHeight: 0,
- statusBarHeight: 0
- }
- },
- props: {
- down: Object,
- up: Object,
- top: [String, Number],
- topbar: [Boolean, String],
- bottom: [String, Number],
- safearea: Boolean,
- fixed: {
- type: Boolean,
- default: true
- },
- height: [String, Number],
- bottombar:{
- type: Boolean,
- default: true
- }
- },
- computed: {
-
- isFixed(){
- return !this.height && this.fixed
- },
-
- scrollHeight(){
- if (this.isFixed) {
- return "auto"
- } else if(this.height){
- return this.toPx(this.height) + 'px'
- }else{
- return "100%"
- }
- },
-
- numTop() {
- return this.toPx(this.top)
- },
- fixedTop() {
- return this.isFixed ? (this.numTop + this.windowTop) + 'px' : 0
- },
- padTop() {
- return !this.isFixed ? this.numTop + 'px' : 0
- },
-
- numBottom() {
- return this.toPx(this.bottom)
- },
- fixedBottom() {
- return this.isFixed ? (this.numBottom + this.windowBottom) + 'px' : 0
- },
- padBottom() {
- return !this.isFixed ? this.numBottom + 'px' : 0
- },
-
- isDownReset(){
- return this.downLoadType===3 || this.downLoadType===4
- },
-
- transition() {
- return this.isDownReset ? 'transform 300ms' : '';
- },
- translateY() {
- return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : '';
- },
-
- scrollable(){
- return this.downLoadType===0 || this.isDownReset
- },
-
- isDownLoading(){
- return this.downLoadType === 3
- },
-
- downRotate(){
- return 'rotate(' + 360 * this.downRate + 'deg)'
- },
-
- downText(){
- if(!this.mescroll) return "";
- switch (this.downLoadType){
- case 1: return this.mescroll.optDown.textInOffset;
- case 2: return this.mescroll.optDown.textOutOffset;
- case 3: return this.mescroll.optDown.textLoading;
- case 4: return this.mescroll.isDownEndSuccess ? this.mescroll.optDown.textSuccess : this.mescroll.isDownEndSuccess==false ? this.mescroll.optDown.textErr : this.mescroll.optDown.textInOffset;
- default: return this.mescroll.optDown.textInOffset;
- }
- }
- },
- methods: {
-
- toPx(num){
- if(typeof num === "string"){
- if (num.indexOf('px') !== -1) {
- if(num.indexOf('rpx') !== -1) {
- num = num.replace('rpx', '');
- } else if(num.indexOf('upx') !== -1) {
- num = num.replace('upx', '');
- } else {
- return Number(num.replace('px', ''))
- }
- }else if (num.indexOf('%') !== -1){
-
- let rate = Number(num.replace("%","")) / 100
- return this.windowHeight * rate
- }
- }
- return num ? uni.upx2px(Number(num)) : 0
- },
-
- scroll(e) {
- this.mescroll.scroll(e.detail, () => {
- this.$emit('scroll', this.mescroll)
- })
- },
-
- emptyClick() {
- this.$emit('emptyclick', this.mescroll)
- },
-
- toTopClick() {
- this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration);
- this.$emit('topclick', this.mescroll);
- },
-
- setClientHeight() {
- if (this.mescroll.getClientHeight(true) === 0 && !this.isExec) {
- this.isExec = true;
- this.$nextTick(() => {
- this.getClientInfo(data=>{
- this.isExec = false;
- if (data) {
- this.mescroll.setClientHeight(data.height);
- } else if (this.clientNum != 3) {
- this.clientNum = this.clientNum == null ? 1 : this.clientNum + 1;
- setTimeout(() => {
- this.setClientHeight()
- }, this.clientNum * 100)
- }
- })
- })
- }
- },
-
- getClientInfo(success){
- let query = uni.createSelectorQuery();
-
- query = query.in(this)
-
- let view = query.select('#' + this.viewId);
- view.boundingClientRect(data => {
- success(data)
- }).exec();
- }
- },
-
- created() {
- let vm = this;
- let diyOption = {
-
- down: {
- inOffset() {
- vm.downLoadType = 1;
- },
- outOffset() {
- vm.downLoadType = 2;
- },
- onMoving(mescroll, rate, downHight) {
-
- vm.downHight = downHight;
- vm.downRate = rate;
- },
- showLoading(mescroll, downHight) {
- vm.downLoadType = 3;
- vm.downHight = downHight;
- },
- beforeEndDownScroll(mescroll){
- vm.downLoadType = 4;
- return mescroll.optDown.beforeEndDelay
- },
- endDownScroll() {
- vm.downLoadType = 4;
- vm.downHight = 0;
- vm.downResetTimer && clearTimeout(vm.downResetTimer)
- vm.downResetTimer = setTimeout(()=>{
- if(vm.downLoadType===4) vm.downLoadType = 0
- },300)
- },
-
- callback: function(mescroll) {
- vm.$emit('down', mescroll)
- }
- },
-
- up: {
-
- showLoading() {
- vm.upLoadType = 1;
- },
-
- showNoMore() {
- vm.upLoadType = 2;
- },
-
- hideUpScroll(mescroll) {
- vm.upLoadType = mescroll.optUp.hasNext ? 0 : 3;
- },
-
- empty: {
- onShow(isShow) {
- vm.isShowEmpty = isShow;
- }
- },
-
- toTop: {
- onShow(isShow) {
- vm.isShowToTop = isShow;
- }
- },
-
- callback: function(mescroll) {
- vm.$emit('up', mescroll);
-
- vm.setClientHeight()
- }
- }
- }
- MeScroll.extend(diyOption, GlobalOption);
- let myOption = JSON.parse(JSON.stringify({'down': vm.down,'up': vm.up}))
- MeScroll.extend(myOption, diyOption);
-
- vm.mescroll = new MeScroll(myOption);
- vm.mescroll.viewId = vm.viewId;
-
- vm.$emit('init', vm.mescroll);
-
-
- const sys = uni.getSystemInfoSync();
- if(sys.windowTop) vm.windowTop = sys.windowTop;
- if(sys.windowBottom) vm.windowBottom = sys.windowBottom;
- if(sys.windowHeight) vm.windowHeight = sys.windowHeight;
- if(sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
-
- vm.mescroll.setBodyHeight(sys.windowHeight);
-
- vm.mescroll.resetScrollTo((y, t) => {
- vm.scrollAnim = (t !== 0);
- if(typeof y === 'string'){
-
- vm.getClientInfo(function(rect){
- let mescrollTop = rect.top
- let selector;
- if(y.indexOf('#')==-1 && y.indexOf('.')==-1){
- selector = '#'+y
- }else{
- selector = y
-
- if(y.indexOf('>>>')!=-1){
- selector = y.split('>>>')[1].trim()
- }
-
- }
- uni.createSelectorQuery().select(selector).boundingClientRect(function(rect){
- if (rect) {
- let curY = vm.mescroll.getScrollTop()
- let top = rect.top - mescrollTop
- top += curY
- if(!vm.isFixed) top -= vm.numTop
- vm.scrollTop = curY;
- vm.$nextTick(function() {
- vm.scrollTop = top
- })
- } else{
- console.error(selector + ' does not exist');
- }
- }).exec()
- })
- return;
- }
- let curY = vm.mescroll.getScrollTop()
- if (t === 0 || t === 300) {
- vm.scrollTop = curY;
- vm.$nextTick(function() {
- vm.scrollTop = y
- })
- } else {
- vm.mescroll.getStep(curY, y, step => {
- vm.scrollTop = step
- }, t)
- }
- })
-
-
- if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {} else {
- vm.mescroll.optUp.toTop.safearea = vm.safearea;
- }
- },
- mounted() {
-
- this.setClientHeight()
- }
- }
- </script>
- <style>
- @import "./mescroll-uni.css";
- @import "./components/mescroll-down.css";
- @import './components/mescroll-up.css';
- </style>
|