小程序的导航(萌新求带)

下拉刷新的概念以及场景

  • 下拉刷新为了获取更多的数据

  • 场景 就是获取列表新的的数据

如何在小程序中开启下拉刷新

  • 全局下拉刷新 在app.json中的window下设置 "enablePullDownRefresh":true,开启 "backgroundColor":"#678987" 下拉刷新的背景颜色 "backgroundTextStyle":"dark", 下拉刷新的文字颜色

  • 局部下拉刷新 在当前页面的json文件设置 "enablePullDownRefresh":true,开启 "backgroundColor":"#678987" 下拉刷新的背景颜色 "backgroundTextStyle":"dark", 下拉刷新的文字颜色

  • 停止下拉刷新 wx.stopPullDownRefresh()

上拉加载 以及应用场景

  • 应用场景就是做分页 获取下一页的数据

分享

  • 分享的方式有两种 一个是点击胶囊,一个是点击按钮(open-type="share")

  • 区分:from 是menu就是点击胶囊分享 如果from是button就是点击按钮分享

分享内容

onShareAppMessage(){ return { title:'分享的标题', imageUrl:'分享的图片', path:'分享的路径',如果不设置,默认分享的是当前页 } }

onPageScroll 监听页面滚动的距离

onPageScroll(e){ e.scrollTop就是滚动的距离 }

  • 应用场景。吸顶功能 点击返回顶部功能

小程序的导航 导航其实就是页面跳转

  • 声明式导航 navigator

  • url 跳转的链接

  • open-type

  • navigate 会缓存我们的页面,而不是销毁,页面的保存栈中只能放10个页面 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

  • redirect 销毁当前页面

  • switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

  • reLaunch 关闭所有页面,打开到应用内的某个页面

  • navigateBack

  • 编程式导航 wx.navigateTo() wx.redirectTo() wx.switchTab()

声明式的导航的传参

  • 小程序中的传参方式只有一种 就是 url后面用问号拼接key=value&key=value

  • 小程序获取页面传过来的参数 方式 onLoad(options) { console.log(options); //参数都在options这个对象里面 },

编程式导航的传参

  • 在标签上绑定data-title="{{参数}}" data-index={{参数}}

  • 跳转的时候

 goDetail(e){
        console.log(e);
        let {index,title} = e.currentTarget.dataset
      wx.navigateTo({
        // url: '../detail/detail?title='+title+'&index='+index,
          url:`../detail/detail?title=${title}&index=${index}`
})

小程序中的网络请求

wx.request({ url:'请求地址', data:请求参数, method:'请求方式get,post ,put,,,' })

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

LIXINHUA2022

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值