h5 uni-app 点击提交后,返回上一页并刷新页面

点击保存或提交以后

 if (res.success) {
            Toast(res.msg);
            setTimeout(() => {
              uni.$emit("getlist", { param: res.success })//这里可以传个空,也可以传值过去
              uni.navigateBack({ // 返回上一页
                delta: 1
              })
            }, 500);
          }

在上一个页面接收传递回来的数据

onLoad(payload => {
  data.type = payload.type;
  methods.init();
  uni.$on("getlist", (data) => {
    methods.getProjectRecordList(data.param);//需要重新访问一下接口。
  })

});

与此同时在组件销毁时将其关闭

onUnload(() => {
  console.log('组件销毁');
  uni.$off('getlist');
})

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app 是一款基于 Vue.js 的跨平台开发框架,支持同时开发微信小程序、H5App 等多个平台,使用 Vue3 和 TypeScript 语法的 setup 语法糖可以更方便地编写组件逻辑。关于上滑加载下拉刷新的列表页面,可以使用 uni-app 内置的组件 `uni-list` 和 `uni-scroll-view` 来实现。 首先,使用 `uni-list` 组件来呈现列表数据,例如: ```html <template> <uni-list> <uni-list-item v-for="(item, index) in list" :key="index"> {{ item }} </uni-list-item> </uni-list> </template> ``` 然后,在 `uni-scroll-view` 组件中监听 `scrolltolower` 事件,当滚动到底部时触发加载更多数据的逻辑,例如: ```html <template> <uni-scroll-view class="list-wrapper" :scroll-y="true" @scrolltolower="loadMore"> <uni-list> <uni-list-item v-for="(item, index) in list" :key="index"> {{ item }} </uni-list-item> </uni-list> </uni-scroll-view> </template> <script setup lang="ts"> import { ref } from 'vue'; const list = ref<string[]>([]); function loadMore() { // 加载更多数据的逻辑 } </script> ``` 对于下拉刷新,可以使用 `uni-scroll-view` 组件的 `enable-flex` 属性启用弹性布局,然后监听 `scrolltoupper` 事件,在事件处理函数中执行刷新数据的逻辑,例如: ```html <template> <uni-scroll-view class="list-wrapper" :scroll-y="true" :enable-flex="true" @scrolltoupper="refresh"> <uni-list> <uni-list-item v-for="(item, index) in list" :key="index"> {{ item }} </uni-list-item> </uni-list> </uni-scroll-view> </template> <script setup lang="ts"> import { ref } from 'vue'; const list = ref<string[]>([]); function loadMore() { // 加载更多数据的逻辑 } function refresh() { // 刷新数据的逻辑 } </script> ``` 需要注意的是,上滑加载和下拉刷新的具体实现逻辑可能有所不同,具体可以根据实际情况进行调整。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值