小程序的导航（萌新求带）

下拉刷新的概念以及场景

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

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

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

• 全局下拉刷新 在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,,,' })