学习笔记-2022/1/22

qjwzero

已于 2022-02-19 21:46:18 修改

阅读量592

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

于 2022-01-22 21:12:36 首次发布

本文链接：https://blog.youkuaiyun.com/qjwzero/article/details/122637574

微信小程序

https://www.bilibili.com/video/BV1834y1676P?p=32
p36-45

微信小程序

从接口中读出数据，并渲染到页面中
1. 轮播图效果

//获取轮播图图片
getswiperList(){
    wx.request({
      url: 'https://www.escook.cn/slides',
      method:"GET",
      success:(res) => {
          console.log(res),
          this.setData({
              swiperList:res.data
          })
      }
    })
},

swiperList用于存储请求的数据

<swiper indicator-dots="true" circular="true">
    <swiper-item wx:for="{{swiperList}}"  wx:key="id">
        <image src="{{item.image}}"></image>
    </swiper-item>
</swiper>

1. 九宫格效果（view中套9个小view，并设置wxss）
  方法上，需设置较复杂的wxss
页面导航（链接开头必须以"/"开头，即’/+path’）
1. 声明式导航
  在页面上声明一个<navigatio>导航组件
  点击<navigatio>导航组件实现页面跳转
  1. 导航到tabBar页面
    
    使用此项可由非tabBar页面跳转至tarBar页面
  2. 导航到非tabBar页面
  3. 后退导航
    
    注：非tarBar之间后退跳转正常；由非tarBar页面跳转后退至tarBar页面正常；无法由tarBar页面后退至tarBar页面或非tarBar页面
    其余参数：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
2. 编程式导航
  调用小程序的导航API，实现跳转
  1. 跳转至tarBar页面：wx.switchTab(obj)
  2. 跳转到非tarBar页面：wx.navigateTo()
  3. 后退：wx.navigateBack()
    
    后退一层，delta可不写
    注：规律同声明式导航，无法从tarBar界面后退至非tarBar界面，用wx.navigateTo()可实现
导航传参（链接开头必须以"/"开头，即’/+path’）
1. 声明式导航传参：<navigator>组件实现
2. 编程式导航传参
3. 在onLoad中接受导航传参：通过options接收
  
  接收后的数据，可在data中定义对象接收。常定义为query:{}，并在onLoad中用setData接收
页面事件
1. 下拉刷新
  1. 开启
    在页面.json或app.json中将enablePullDownRefresh设为true（app.json为全局）
  2. 监听下拉刷新事件：页面.js文件中的onPullDownRefresh()函数，可在其中进行操作
  3. 停止下拉刷新效果：下拉刷新后，尽管onPullDownRefresh()函数以执行，但刷新效果仍会继续呈现。解决方法：调用wx.stopPullDownRefresh()
2. 上拉触底：实现数据分页，加载更多数据
  1. onReachButtom()：监听上拉触底，可在该函数中调用获取信息的函数，达到上拉加载新内容的功能
  2. .json文件中修改onReachButtomDistance：可修改上拉触底距离
  3. 展现loading效果：wx.showLoading(Object object)，该方法不会自动关闭，需调用wx.hideLoading()才能关闭，在complete中调用wx.hideLoading()
  4. 节流处理：多次触底则多次调用加载信息函数，节流处理是实现同一时间只允许一个上拉触底事件，当上一个请求没有完成则不允许再发起下一个上拉触底
  5. 实现节流处理：