uni-app:mescroll-body組件

mescroll的uni版本, 提供<mescroll-body>和<mescroll-uni>兩個組件, 其中<mescroll-body>支持配置成系統自帶的下拉組件

 總結：從1.2.1版本開始，絕大部分情況應優先考慮使用 mescroll-body 因為支持原生組件,且性能好，只有當需要局部區域滾動 (如嵌在彈窗,浮層,swiper中), 才考慮 mescroll-uni

多mescroll使用步驟：

1、在components目錄下新建mescroll-uni目錄，把以下文件拷貝到該目錄下

  2、在main.js注冊全局組件, 省去具體頁面中引入和注冊mescroll組件的代碼

// 注冊全局組件
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
Vue.component('mescroll-body', MescrollBody)
Vue.component('mescroll-uni', MescrollUni)

3、在父組件引入mescroll-more.js以及子組件

import MescrollItem0 from './list/news.vue';
import MescrollItem1 from './list/original.vue';
import MescrollItem2 from './list/adjustPrice.vue';
import MescrollItem3 from './list/interact.vue';
import MescrollItem4 from './list/video.vue';
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";

4、在父組件注冊子組件以及使用mescroll-more

mixins: [MescrollMoreMixin], // 多個mescroll-body寫在子組件時, 則使用mescroll-more.js補充子組件的頁面生命周期
components: { MescrollItem0, MescrollItem1, MescrollItem2, MescrollItem3, MescrollItem4 },

5、在父組件使用子組件

<mescroll-item0 ref="mescrollItem0" :i="0" :index="tabIndex"></mescroll-item0>
<mescroll-item1 ref="mescrollItem1"  :i="1" :index="tabIndex"></mescroll-item1>
<mescroll-item2 ref="mescrollItem2"  :i="2" :index="tabIndex"></mescroll-item2>
<mescroll-item3 ref="mescrollItem3"  :i="3" :index="tabIndex"></mescroll-item3>
<mescroll-item4 ref="mescrollItem4"  :i="4" :index="tabIndex"></mescroll-item4>

6、在子組件中引入mecroll-mixinx.js和mescroll-more-item.js

import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";

7、在子組件使用MescrollMoreItemMixin

mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此處還需使用MescrollMoreItemMixin (必須寫在MescrollMixin后面)

8、在子組件的template中使用mescroll-body組件

<template>
    <view class="container" v-show="i===index">
        <view class="media-item">
            <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
                <view class="media-item-view" v-for="(item,index) in newsList" :key="item.id">
                    <view class="media-item-view-left">
                        <image class="media-item-view-img" :src="item.image"></image>
                    </view>
                    <view class="media-item-view-right">
                        <view class="media-item-span">{{item.title}}</view>
                        <view class="media-item-desc">
                            <text class="copyfrom">{{item.copyfrom}}</text>
                            <text class="inputtime">{{item.inputtime}}</text>
                        </view>
                        <comment title="新聞" :dataId="item.id"></comment>
                    </view>
                </view>
            </mescroll-body>
        </view>
    </view>
</template>

注意：

1)、@init="mescrollInit" @down="downCallback" @up="upCallback"為固定值,不可刪改(與mescroll-mixins保持一致) 

2)、:down="downOption" :up="upOption" 絕大部分情況無需配置

9、上拉刷新配置upOption和下拉加載downOption配置

data() {
			return {
				downOption: {
					native: false,
					use: true, // 是否啟用下拉刷新; 默認true
				},
				upOption: {
					use: true, // 是否啟用上拉加載; 默認true
					auto: false,
					page: {
						num: 1,  
						size: 10 // 每頁數據的數量
					},
					noMoreSize: 5, //如果列表已無數據,可設置列表的總數量要大於半頁才顯示無更多數據;避免列表數據過少(比如只有一條數據),顯示無更多數據會不好看
					empty: {
						tip: '~ 搜索無結果 ~' // 提示
					}
				}
			}
		},

10、寫downCallback()和upCallback(page)方法

　　　　　　  downCallback(){
                http.post("/news/getList",{op: "newsMoreApp",catid: "678",page: 1}).then(response=>{
                    console.info(response)
                    let newsList = []
                    response.forEach(item=>{
                        const temp = {
                            id: item.id,
                            image: item.thumb,
                            title: item.title,
                            copyfrom: item.copyfrom,
                            inputtime: item.inputtime
                        }
                        newsList.push(temp)
                    })
                    this.newsList = newsList
                    this.mescroll.optUp.page.num = 0;
                    this.mescroll.endSuccess()
                }).catch(error=>{
                    console.error(error)
                    this.mescroll.endErr()
                })
            },
            upCallback(page){
                console.log(page)
               let pageNum = page.num + 1;
                http.post("/news/getList",{op: "newsMoreApp",catid: "678",page: pageNum}).then(response=>{
                    console.info(response)
                    let totalSize = 0;
                    response.forEach(item => {
                        totalSize = item.pages;
                        const temp = {
                            id: item.id,
                            image: item.thumb,
                            title: item.title,
                            copyfrom: item.copyfrom,
                            inputtime: item.inputtime
                        };
                        this.newsList.push(temp);
                    });
                    
                    this.mescroll.endBySize(response.length, totalSize);
                }).catch(error=>{
                    console.error(error)
                    this.mescroll.endErr(); //失敗
                })
            }

注意：下拉刷新downCallback中page為1，上拉加載upCallback中page為page.num+1

注意：page.num默認從1開始。在upCallback中要加1，否則不會加載下一頁。具體data中page.num的值是0還是1，以及調用upCallback方法時要不要加1，則要看具體情況而定。

mescroll.optUp：獲取上拉加載的配置 (可直接動態修改配置的值)

mescroll.optDown：獲取下拉刷新的配置 (可直接動態修改配置的值)

this.mescroll.resetUpScroll():重置列表為第一頁 (自動執行 page.num=1, 再觸發upCallback方法 ),達到重新加載的效果

參考官方示例：基礎案例中“mescroll-more 多mescroll”的情況

下載地址：http://www.mescroll.com/demo.html

 單個Mescroll使用步驟

1、在components目錄下新建mescroll-uni目錄，把以下文件拷貝到該目錄下

2、在main.js中注冊全局組件

// 注冊全局組件
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
Vue.component('mescroll-body', MescrollBody)
Vue.component('mescroll-uni', MescrollUni)

3、引入mescroll-mixins

import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

4、注冊MescrollMixin

mixins: [MescrollMixin], // 使用mixin (在main.js注冊全局組件)

5、使用mescroll-body組件

<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
            <!-- 數據列表 -->
            <good-list :list="goods"></good-list>
        </mescroll-body>

data數據模型中的數據

upOption: {
                    auto: false,
                    page: {
                        num: 0,  // 當前頁碼,默認0,回調之前會加1,即callback(page)會從1開始
                        size: 10 // 每頁數據的數量
                    },
                    noMoreSize: 5, //如果列表已無數據,可設置列表的總數量要大於半頁才顯示無更多數據;避免列表數據過少(比如只有一條數據),顯示無更多數據會不好看
                    empty: {
                        tip: '~ 搜索無結果 ~' // 提示
                    }
                }

downCallback()方法和upCallback()方法

downCallback() {
                http.post("/news/getDataCenter", {
                    op: "dataCenterApp",
                    table: this.tab,
                    type: this.type,
                    index: this.index,
                    page: 1
                }).then(response => {
                    console.info(response);
                    this.showFlag = true;
                    
                    let list = [];
                    let categories = [];
                    let series = [{
                        name: '',
                        data: [],
                        legendShape:'diamond'
                    }]
                    for(var i in response){
                        if(i != "nums"){
                            if(response[i].ivt_nums != null && response[i].ivt_nums != ''){
                                if(response[i].ivt_nums == 0 || response[i].ivt_nums == '0%'){
                                    response[i].isActive = 'blue';
                                }else if(response[i].ivt_nums.indexOf("-") > -1){
                                    response[i].isActive = 'green';
                                }else{
                                    response[i].isActive = 'red';
                                }
                            }else{
                                response[i].isActive = 'red';
                            }
                            
                            list.push(response[i]);
                            
                            categories.push(response[i].END_DATE);
                            series[0].data.push(response[i].ivt_nums);
                            
                        }
                    }
                    this.list = list;
                    
                    //加載圖表
                    categories.reverse();
                    series[0].name = categories[0]+'  至  '+categories[categories.length-1];
                    series[0].data.reverse();
                    let LineA = {categories:categories,series:series};
                    this.showLineA("canvasLineA",LineA);
                    
                    this.mescroll.optUp.page.num = 0;
                    this.mescroll.endSuccess(); //成功
                }).catch(error => {
                    console.error(error);
                    this.mescroll.endErr(); //失敗
                });
            },
            upCallback(page) {
                let pageNum = page.num + 1;
                http.post("/news/getDataCenter", {
                    op: "dataCenterApp",
                    table: this.tab,
                    type: this.type,
                    index: this.index,
                    page: pageNum
                }).then(response => {
                    let total = 0;
                    let count = 0;
                    for(var i in response){
                        if(i != "nums"){
                            count ++;
                            
                            if(response[i].ivt_nums != null && response[i].ivt_nums != ''){
                                if(response[i].ivt_nums == 0 || response[i].ivt_nums == '0%'){
                                    response[i].isActive = 'blue';
                                }else if(response[i].ivt_nums.indexOf("-") > -1){
                                    response[i].isActive = 'green';
                                }else{
                                    response[i].isActive = 'red';
                                }
                            }else{
                                response[i].isActive = 'red';
                            }
                            
                            this.list.push(response[i]);
                        }else{
                            total = response[i];
                        }
                    }
                    
                    //this.mescroll.endSuccess(); //成功
                    this.mescroll.endBySize(count, total);
                }).catch(error => {
                    console.error(error);
                    this.mescroll.endErr(); //失敗
                });
            }