长沙网站开发智,溧阳网站建设公司,加强红色网站建设,建设银行网站修改预留手机号效果图 思路
实现一个微信小程序的复合滚动页面#xff0c;主要通过Swiper组件实现垂直方向的轮播功能#xff0c;每个轮播项内部使用Scroll-View组件来展示可垂直滚动的长内容#xff0c;如图片和文本。
代码
!-- wxml --
view classswiper-container…效果图 思路
实现一个微信小程序的复合滚动页面主要通过Swiper组件实现垂直方向的轮播功能每个轮播项内部使用Scroll-View组件来展示可垂直滚动的长内容如图片和文本。
代码
!-- wxml --
view classswiper-containerswiper classswiper verticaltrue bindchangeonSwiperChangeswiper-item!-- 第一个模块的滚动视图 --scroll-view classscroll-view scroll-ytrue!-- 这里是第一个模块的长内容 --view classlong-contentimage classimg srchttp://img0.baidu.com/it/u1836749971,2875128665fm253app138fJPEG?w800h1129#34; mode//view/scroll-view/swiper-itemswiper-item!-- 第二个模块的滚动视图 --scroll-view classscroll-view scroll-ytrue!-- 这里是第二个模块的长内容 --view classlong-contentimage classimg srchttps://p9-pc-sign.douyinpic.com/tos-cn-i-0813/8506ad012d1d40ff8940482f2a69e7ca~tplv-dy-aweme-images:q75.webp?biz_tagaweme_imagesfrom3213915784sPackSourceEnum_AWEME_DETAILscimagesefalsex-expires1712764800x-signaturealMSPxEM4w4svYO29%2BIIpY8Wsog%3D#34; mode//view/scroll-view/swiper-item/swiper
/view
/* wxss */
.swiper-container {width: 100vw;height: 100vh;background-color: black;
}
.swiper {width: 100%;height: 100%;
}
.scroll-view {width: 100%;height: 100%;
}
.long-content {height: 100vh;
}
.img {width: 100%;height: 100%;
}
// js
Page({data: {current: 0},onSwiperChange(e) {// 当swiper的current改变时处理切换逻辑console.log(当前swiper-item的索引:, e.detail.current);}
});
其他
其他方式实现微信小程序页面上下滚动 - 灰信网软件开发博客聚合发现的问题鼠标中键直接滚动会导致页面切换不彻底相当于页面A和页面B拼接成一个页面滑动。
