vux使用要點記錄二(Cell&&Scroller)

cell的使用

• 註冊和導入組件

import { Cell, Group } from 'vux'
export default {
 components: {
   Cell,
   Group
 }
}

• 使用組件

<group>
   <cell>
     <div slot="title">規格：<checker
       v-model="demo5"
       default-item-class="demo5-item"
       selected-item-class="demo5-item-selected"
     >
       <checker-item
           v-for="i in [1, 2, 3]"
           :key="i"
           :value="i"
           >￥{{i*300}}</checker-item>
       </checker>
     </div>
   </cell>
</group>

使用說明

添加 is-link 有右側箭頭 > ,不添加則沒有

slot的具體使用:

• title – 左邊標題內容,可以添加其他組件
• child – cell的直接子元素，因此可以添加一個相對於cell絕對定位的元素
• icon – 修改左側圖標
• after-title – 修改右側圖標

給組件添加點擊事件

一般的註冊方式:@click="事件處理函數"是沒有辦法處理的,需要加上native,具體方式爲:@click.native=“事件處理函數”.

詳情參考上面實例,具體操作,可點擊x-header使用規則使用
參考鏈接:https://doc.vux.li/zh-CN/components/cell.html

Scroller的使用

• 註冊和導入組件

import { Scroller } from 'vux'

export default {
 components: {
   Scroller
 },
 data(){
 	return {
  		pullupDefaultConfig: {
       	content: "上拉加載更多",
       	pullUpHeight: 60,
       	height: 40,
       	autoRefresh: true,
       	downContent: "釋放後加載",
       	upContent: "上拉加載更多",
       	loadingContent: "加載中...",
       	clsPrefix: "xs-plugin-pullup-"
     	},
     	status: {
       	pullupStatus: "default"
     	},
     	height: "3.9rem",
     	page: 1,
     	pageSize: 5,
     	recordList: []
 	}
 },
 methods:{
  getAcceptRecord() {
     var data = {
       page: this.page,
       pageSize: this.pageSize
     };
     Api.sign.getAcceptRecord(data).then(res => {
       if (res.data.count - this.pageSize < 0) {
         this.height = 0.77 * res.data.count + "rem"; //設置容器高度
       }

       if (res.data.list && res.data.list.length === 0) {
         this.status.pullupStatus = "disabled"; // 禁用下拉
         return false;
       }

       if (this.recordList.length > 0) {
         if (this.recordList.length <= res.data.count) {
           this.recordList = this.recordList.concat(res.data.list);
         } else {
           return false;
         }
       } else {
         this.status.pullupStatus = "default";
         this.$nextTick(() => {
           this.$refs.scroller.reset();
           //this.$refs.scroller.donePulldown();
         });
         this.recordList = res.data.list;
       }
       this.onFetching = false;
     });
   },
   addRecordData() {
     if (this.onFetching) {
       // do nothing
     } else {
       this.onFetching = true;
       setTimeout(() => {
         this.page++;
         this.getAcceptRecord();
       }, 2000);
     }
   },
 }
}

• 組件使用

<div class="accept_record">
         <div class="title">
           <span>簽到領獎記錄</span>
           <img
             v-show="see_more"
             @click="doSeeMore"
             src="/static/img/sign/see_more.png"
             alt=""
           />
         </div>
         <scroller
           v-show="!see_more"
           v-model="status"
           lock-x
           height="3.9rem"
           use-pullup="true"
           :pullup-config="pullupDefaultConfig"
           ref="scroller"
           @on-scroll-bottom="addRecordData"
           :style="{ height: height }"
         >
           <div class="box2">
             <div
               class="record_item"
               v-for="item in recordList"
               :key="item.id"
             >
               <span class="play_name">
                 {{ item.play_name }}<span>{{ item.exchange_time }}</span>
               </span>
               <span class="bag_name">{{ item.bag_name }}</span>
             </div>
           </div>
         </scroller>
         <div v-show="!see_more" class="no_more" @click="doSeeMore">
           <span>收起</span><i class="iconfont icon-fanhuidingbu"></i>
         </div>
       </div>

使用說明

由於Scroller組件沒有維護,在使用@on-pulldown-loading時,需要使用donePullup方法來結束時間是會報錯,因爲初始化失敗,只會執行一次,如果需要多次執行(分頁操作),就需要使用@on-scroll-bottom來綁定事件,由於事件會觸發多次,需要使用防抖or節流的原則,控制執行次數