ios微信小程序上下滑动效果

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

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

直接上代码部分

//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表现效果

在这里插入图片描述

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

这是微信的一个动态背景。

ios系统滑动页面有个d簧效果，App上一般滑动视图有个bounce属性，设置为NO就可以了 ，但是小程序在苹果手机上运行，页面滑动也会有d簧效果，同时有看见一个白色背景，这个背景色并不能通过设置页面page背景色去掉，想要滑动视图的时候看不到白色背景，可以按照下面的方法：可以在page.json文件内配置 ："backgroundColor": "#ccc" 属性，这个方法比较便捷。

微信小程序不是基于系统增加的，而是基于微信。

那么微信小程序的增加方法是：第一步：点击打开“微信”。第二步：按住屏幕下拉就会出现“小程序”页面。第三步：点击“最近使用”。第四步：进入“小程序”页面在这里你可以添加你需要的“小程序”了。（以苹果手机上的微信为例）

详细 *** 作步骤如下：

第一步：点击打开“微信”。

第二步：按住屏幕下拉就会出现“小程序”页面。

第三步：点击“最近使用”。

第四步：进入“小程序”页面搜索你需要的小程序，就可以添加你需要的“小程序”了。

---