通过使用循环容器的滚动监听和设置值森辩派，同时配置前置条件实现滚动到具体某一项，实现顶部图片滑动联动底部图片滑动效果。
创建数据表注意：在数据中心你可以创建属于自己应用程序的数据表格，数据表格类型分为用户表、商品表、订单表和自定义表。
点击数据中心。
创建数据表：轮播图。
字段包含：图片。
点击数据中心。
创建数据表：联动图
字段包含：图片（多图类型）。
创建事件注意：事件是构建数据与界面元素组件链接的抽象逻辑。数据表与界面元素组件通过事件连接。
点击事件中心。
创建事件。
点击事件中心。
创建事件。
触发器此贺配置注意：在检查器面板中的触发器设置面板创建触灶手发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。
选中循环容器。
点击检查面板中的触发器面板。
创建触发器：设置值。
创建触发器：查询轮播图。
选中循环容器。
点击检查面板中的触发器面板。
创建触发行为是滚动到指定项，名称分别为0， 1， 2。
分别增加执行触发器的前置条件。
创建触发器：获取联动图
选中循环容器。
点击检查面板中的触发器面板。
创建触发器：call，执行其它触发器。
创建触发器：scroling，触发行为是项目序号滚动变化。
绑定数据注意：绑定数据可以将事件返回的数据和组件显示内容进行绑定。
选中循环容器的列表条目。
点击检查面板中的数据绑定与设置。
绑定数据。
选中循环容器。
点击检查面板中的数据绑定与设置。
开启滚动对其开关。
小程序实现满屏上下滑动效果写的时候发现网上没有好用的，要么过于复杂，要么不太实用，我就自己整了个简单的
直接上代码部分
//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表现效果
在这里插入图片描述
本人前端一般般，可能会有问题，仅供参考
新接了埋洞一个做微信小程序的活，编码方式跟vue很相似宽液燃，样式编写比普通css样式轻松的多，现要实现一个轮播图的效果。
请教了我的同学，她说小程序有两种方法能实现这个效果：
微信小程序—swiper组件文档
wxml文件：
js文件：
法慎虚一实现出来的效果图是酱紫的：
wxml文件：
js文件：
wxss文件：
用法二实现出来的效果图是酱紫的：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）