微信小程序知识点(二)

1.下拉刷新事件

如果页面需要下拉刷新功能,则在页面对应的json配置文件中,将enablePullDownRefresh配置设置为true,如下

bash 复制代码
{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

2.上拉触底事件

在很多时候,我们在浏览一些购物网站的时候,往上拉的时候都是动态加载新的数据信息,这个时候就需要用到页面的上拉触底事件,来进行新数据的获取和加载,我们在对应的页面下的js文件中onReachBottom()事件进行监听处理,就可以对上拉触底就行功能编写:

例如我们在一个界面上获取随机颜色加载的案例,

**a.**我们在data中定义一个colorList来获取随机颜色集合
javascript 复制代码
  data: {
    colorList:[]     
  },
**b.**通过wx:request来调用接口获取随机颜色数据,并且在页面的onLoad事件中调用,目的是为了一进来页面就进行接口的调用
javascript 复制代码
getColors(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method:"GET",
      success:({data:res}) => {
        console.log(res)
        this.setData({
          colorList:[...this.data.colorList,...res.data]
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  },
**c.**在页面中通过wx:for的方法动态显示颜色块
html 复制代码
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">
{{item}}
</view>
**d.**在onReachBottom()方法中同样调用getColors方法来实现每次上拉到底的时候获取新的数据进行拼接显示
javascript 复制代码
 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getColors()
  },
e.添加loading提示效果,

通过wx:showLoading(Object object)方法,注意,需要主动调用wx:hideLoading才能关闭提示,

f.最终我们可以看到上拉的效果如下:

上拉触底


3.自定义组件Component

自定义组件指的是自己定义的可以被其他页面引用的component组件,它与页面不同,类似于winform中Form窗口和userControl用户空间的区别。一个用户空间可以被多个窗口使用,同样的一个用户组件Component可以被多个Page引用,自定义组件包括局部组件全局组件:

3.1局部组件:

定义在单独页面中的组件,在某一个页面中的.json文件中的usingComponent节点中来定义,如下:

javascript 复制代码
 "usingComponents": {
    "my-test1":"/component/test/test"
  },

然后在对应的页面中直接引用即可:

html 复制代码
<my-test1></my-test1>
3.2全局组件

全局组件是定义中小程序外部的app.json中的,同样在app.json文件中增加usingComponents节点进行配置:如下:

javascript 复制代码
{
 "usingComponents": {
   "global-test":"/component/test/test"
 },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

在app.json文件定义之后,便可以在该小程序的任何页面中进行引用。

相关推荐
小飞哥liac1 小时前
微信小程序的组件
微信小程序
stormjun3 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck3 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie2345 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong5 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟5 小时前
小程序跳转另一个小程序
小程序
8 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
12 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji12 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
说私域13 小时前
完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示
人工智能·小程序