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

Posted 2023-03-14

小程序实现满屏上下滑动效果
写的时候发现网上没有好用的，要么过于复杂，要么不太实用，我就自己整了个简单的

直接上代码部分

//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表现效果
在这里插入图片描述

本人前端一般般，可能会有问题，仅供参考 参考技术A 在ios版微信小程序中，可以使用Swiper组件实现上下滑动的效果，通过添加相应的代码可调整滑动的速度、方向和位置等。