微信小程序（九）实现首页代码

swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行誉陆为。

swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。

列表渲染

条件渲染

dataset

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

redirectTo

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

没铺开直接赋值的打印结果：(打开注释)

不加...

铺开后庆清顷赋值的打印结果：(打开注释)

onPullDownRefresh

onPullDownRefresh()方法，用于监听用户下拉刷新事件正芦。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

onReachBottom()方法，用于监听用户上拉触底事件。

微信小程序regexp对象（附带方法解析）

getRegExp(pattern[, flags])，参数：

小程序实现满屏上下滑动效果

写的时候发现网上没有好用的，要么过于复杂，要么不太实用，我就自己整了个简单的

直接上代码部分

//wxml部分

<swiper indicator-dots="true" indicator-color="green" indicator-active-color="red" autoplay="true" interval="5000" duration="1000" circular="true" vertical="true">

<swiper-item wx:for="{{images}}">

<image src="{{item}}" mode="scaleToFill"></image>

</swiper-item>

</swiper>

下面是js部分，大部分都是自动生成的函数，只要在data里面拦仔凳存放图片地址就行，其他的可以不用管

// pages/template/template.js

Page({

/**

* 页面的初始数据

*/

data: {

images: ["/pages/template/images/1.png","/pages/template/images/2.png","/pages/template/images/3.png","/pages/template/images/4.png"]

},

/**

* 生命周期函数--监听页面加载

*/简旅

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/戚枣

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

效果图

iphone5表现效果

在这里插入图片描述

iphone 12/13 Pro Max表现效果

在这里插入图片描述

本人前端一般般，可能会有问题，仅供参考

bindChange为输入框发生改变事件。微信提供的bindchange在支持方面还有小问题，目前是失去焦点才能触发到此事件的发生。

如果在 bindchange的事件回物握芹调函数中使用 setData改变 current值，则有可能导致 setData被不停地调用，因而通常情况下请在改变 current值前检测 source字段来判断是否是由于用户触摸引起。

swiper里加了bindchange事件，有很多个swiper-item，连续快速切换swiper-item触发bindchange事件，小程序会出现一直无限触发bindchange事件。请检查是否在change事件中使用setData改变current值，请避免该皮没 *** 作。

扩展资料

bindchange是swiper组件的属性之一，类型为eventhandle。

current改变时会触发change事件，event.detail={current,source}。当滑块的current改变时会触发该事件并执行绑定的方法。

swiper组件是小程序中使用频次最高的组件之一，属于视图容器类组件，它通过对自身属性进行简单配置就可以实现在前端开发中要写很多代罩毕码才能完成的轮播图效果。

参考资料：微信官方文档-swiper

---