当前位置：首页 > news >正文

微信小程序知识点(二)

news 来源：原创 2024/9/20 4:46:16

1.下拉刷新事件

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

{"usingComponents": {},"enablePullDownRefresh": true
}

2.上拉触底事件

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

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

a.我们在data中定义一个colorList来获取随机颜色集合

  data: {colorList:[]     },

b.通过wx:request来调用接口获取随机颜色数据，并且在页面的onLoad事件中调用，目的是为了一进来页面就进行接口的调用

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的方法动态显示颜色块

<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">
{{item}}
</view>

d.在onReachBottom()方法中同样调用getColors方法来实现每次上拉到底的时候获取新的数据进行拼接显示

 /*** 页面上拉触底事件的处理函数*/onReachBottom() {this.getColors()},

e.添加loading提示效果，

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

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

上拉触底

3.自定义组件Component

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

3.1局部组件：

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

 "usingComponents": {"my-test1":"/component/test/test"},

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

<my-test1></my-test1>

3.2全局组件

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

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

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