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节流的原则,控制执行次数