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

在这里插入图片描述

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

让微信小程序中间的图标也跟着图上下滑动方法如下：

1、在WXML文件中创建一个固定高度的区域，并设置其为可滚动的。

2、在该区域内添加两个元素：一个用于显示上下滑动的图片，另一个用于显示图标。

3、在CSS样式文件中，对这两个元素分别设置相应的位置和样式。其中，上下滑动的图片需要设置position：absolute。top：0。left：0。width：100%。height：auto。z-index：-1。等属性，使其能够覆盖住整个区域并与图标区分开来。而图姿轿配标元素则需要设置position：relative。等属性来保证其相对于父元素的位置不变。

4、使用JavaScript监听区域的滚动事件，获取当前滚动迹指位置，并将其赋值给图标元素的top属性，以实现图标随帆毕着滚动上下移动。

微信小程序直播消息滑动，雹正拿1.打开微信，点击发源搭现，找到小程序点击，进入小程序以后，在搜索框内输入手持d幕。

2.进入小程序清姿之后可以看到字幕的样式，选择中间滚动的字幕样式

3.对边点击一处找到输入框，在输入框内输入你想显示的内容，点击右边的选项可以调节字幕内容的大小、颜色以及滚动速度等，然后保存到手机中就可以了。

---