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>