uniapp 子组件 mounted 刷新

方法一:通过在父组件的onShow调用子组件的方法(请求) 实现页面的刷新

父组件 html

	<stock :obj="obj"  ref="stock" />

js

	onShow() {
		console.log('我是onshow')
		this.$refs.stock.getData()
	},

子组件

js 请求的参数必须在data中初始化

data() {
	return {
		tableData:{},
		info:{
			directorEnabled: JSON.parse(uni.getStorageSync('userInfo')).directorEnabled,
			managerId:JSON.parse(uni.getStorageSync('userInfo')).branch.managerId,
			token: uni.getStorageSync('token'),
			beginTime: 1600854391,
			endTime:1700854463,
			displayEnable: false,
			businesserId:JSON.parse(uni.getStorageSync('userInfo')).directorEnabled?JSON.parse(uni.getStorageSync('userInfo')).id:''
		},

	};
},

方法:

async getData(type){
	let json = await api.tarvelIndex(this.info)

	console.log(json,'我是json')
	if(json.status === 200){
		json.data.map(item=>{
			if(item.id = this.obj.id){
				this.tableData = item
			}
		})
	}
},

方法二:v通过-if 在父组件中的onShow 创建和 onHide销毁组件

父组件 html

  <stock :obj="obj"  v-if="flag" />

js

onShow() {
	this.flag = true
},
onHide() {
	this.flag = false
},

子组件正常使用

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp中,可以使用内置的组件`<scroll-view>`来实现上拉刷新和下拉加载。具体步骤如下: 1. 在`<scroll-view>`标签中添加`@scrolltolower`事件和`@scrolltoupper`事件,分别表示滚动到底部和顶部时触发的事件。 2. 在事件处理函数中,可以调用相应的方法来实现上拉刷新和下拉加载。 例如,可以使用`uni.request()`方法发送请求获取数据,然后将数据添加到页面的数据列表中,最后调用`uni.stopPullDownRefresh()`方法停止下拉刷新动画。 示例代码如下: ```html <template> <scroll-view class="list" :style="{height:height+'px'}" scroll-y @scrolltolower="loadMore" @scrolltoupper="refresh"> <ul> <li v-for="(item,index) in list" :key="index">{{item}}</li> </ul> </scroll-view> </template> <script> export default { data() { return { list: [], // 数据列表 page: 1, // 当前页数 limit: 10, // 每页数据条数 height: 0 // scroll-view的高度 } }, mounted() { // 获取 scroll-view 的高度 uni.getSystemInfo({ success: res => { this.height = res.windowHeight } }) // 页面初始化时加载数据 this.loadData() }, methods: { // 加载数据 loadData() { uni.request({ url: 'https://xxx.com/api/list', data: { page: this.page, limit: this.limit }, success: res => { this.list = this.list.concat(res.data) } }) }, // 下拉刷新 refresh() { this.page = 1 this.list = [] this.loadData() uni.stopPullDownRefresh() }, // 上拉加载更多 loadMore() { this.page++ this.loadData() } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值