没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = ‘default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { this.$refs.scroller.reset() }) 贴出整个页面的代码
资源推荐
资源详情
资源评论
使用使用vux实现上拉刷新功能遇到的坑实现上拉刷新功能遇到的坑
最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑:
1.问题:只刷新一次,解决方法:需要自己手动重置状态
this.scrollerStatus.pullupStatus = ‘default',
2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置
activated () {
this.$refs.scroller.reset()
}
如果还没效果,请在获取后台数据后,执行如下代码
this.$nxtTick(() => {
this.$refs.scroller.reset()
})
贴出整个页面的代码。
<template>
<div style="height:100%;">
<x-header slot="header" :left-options="{showBack: false}" >会议列表
<a slot="right" v-on:click="show = true" > <icon type="search"></icon> </button> </a>
</x-header>
<!-- 会议列表 -->
<scroller v-model="scrollerStatus" height="-46" lock-x scrollbar-y ref="scroller" :bounce="isbounce" :use-pullup="showUp" :pullup-config="upobj" @on-
pullup-loading="selPullUp" >
<div class="box2">
<p v-for="list, index in lists">
<router-link :to="{ path: list.id } ">
<p style="height:40px;">
<span class="spanMeetTitle" v-html='(index+1) + " . " + list.name' ></span>
<span class="spanMeetStatu" v-html='list.status'></span>
</p>
<p class="prevSuper">
<form-preview header-label="" header-value="" :bodyItems="list" :footer-buttons="buttons1"></form-preview>
</p>
</router-link>
<hr>
</p>
</div>
</scroller>
<!-- 导航 -->
<Home></Home>
<!-- 搜索 -->
<popup v-model="show" @on-hide="log('hide')" @on-show="log('show')" height="93%">
<div class="popup0">
<group>
<x-input v-model='meetName' placeholder="请输入“会议名称”搜索"></x-input>
<div style="float:left;margin-top: -36px;"><icon type="search"></icon></div>
</group>
<!--
<group>
<checklist :max=1 title="会议审批状态" required :options="commonList" v-model="checkStatus" @on-change="change"></checklist>
</group> -->
<group title="会议审批状态">
<radio :options="commonList" v-model="checkStatus" @on-change="change"></radio>
</group>
<group title="会议类型">
<selector placeholder="请选择会议类型" v-model="checkType" :options="meetType"></selector>
</group>
<group title="召开时间">
<flexbox>
<flexbox-item>
<div class="flex-demo" style="background-color:white;color:black;height:45px">
<datetime title='' placeholder="请选择" v-model="startTime" format="YYYY-MM-DD HH:mm" @on-change="change" ></datetime>
</div>
</flexbox-item>
至
<flexbox-item>
<div class="flex-demo" style="background-color:white;color:black;height:45px">
<datetime title='' placeholder="请选择" v-model="stopTime" format="YYYY-MM-DD HH:mm" @on-change="change" ></datetime>
资源评论
weixin_38656364
- 粉丝: 8
- 资源: 898
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功