小程序联动滚动

最新推荐文章于 2024-04-28 15:42:08 发布
最新推荐文章于 2024-04-28 15:42:08 发布
阅读量418 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38728634/article/details/111553671
版权

在这里插入图片描述

小程序中的联动滚动可以使用scrollview中的滚动事件绑定wxs中的事件，在wxs中处理另一个联动的元素滚动，另一个元素要通过定位中的left或者top来实现滚动而不能使用scroll-view，因为wxs中没办法拿到另一个scroll-view中的属性，只能通过setStyle来设置。
scroll-view如果没有设置scroll-x或者scroll-y的话，scroll-left和scroll-top即使有值也是无效的

o小红帽o
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动开发技术3.6.15章节测试
weixin_51035156的博客
10-06 1000
1【单选题】 下列关于小程序生命周期说法不正确的是（ ） A、 分为应用生命周期和页面生命周期两种 B、 在 onLoad 生命周期中可以获得地址中参数 C、 在onLaunch 中可以初始一些全局数据 D、 onLaunch生命周期函数会被重复执行 我的答案：D 2【单选题】 下列关于小程序配置说法不正确的是（） A、 分为全局配置和页面配置两种类型 B、 全局配置会对所有的页面生效 C、 页面配置只针对当前页面生效 D、 ...
uniapp.微信小程序中scroll左右滚动条联动效果实现
Dummerd的博客
11-21 2054
获取滚动条左右联动效果
《微信小程序开发实战》课后题
热门推荐
weixin_46438851的博客
12-26 3万+
《微信小程序开发实战》课后题
vue实现滚动条联动（一个滚动条控制两个或多个）
最新发布
编程不过是一门失传艺术的别名，这门艺术的名字叫做“思考”
04-28 733
这样就实现了两边表格的滚动条联动，有多个表格，也是同样的方法，使多个表格的scrollTop和scrollLeft相同就可以了。
微信小程序开发实战课后习题解答————第三章（作业版）
dazhanglao的博客
05-18 4614
微信小程序开发实战（黑马程序员）书籍的课后习题，自己做的，答案可能不准确，希望发现错误的大佬能帮忙给出正确答案，一起学习
【小程序教程】微信小程序之事件绑定
shenchengyv的博客
10-12 3569
微信小程序的事件绑定是非常重要的一部分，它可以让我们的小程序与用户进行交互，实现各种功能，例如点击按钮、滑动页面、输入内容等等。通过本篇博文的介绍，我们了解了微信小程序事件绑定的基本语法和常用的事件类型，学会了如何编写事件处理函数、以及传参和阻止冒泡的方法。在微信小程序中，通过在标签上绑定事件，当用户进行某种操作时，该事件就会被触发，从而执行相应的代码逻辑。在事件绑定中，我们需要定义对应的事件处理函数，当事件被触发时，该函数就会执行。，可以用来获取事件的相关信息，例如。在上面的代码中，当用户点击。
微信小程序实现联动选择器
01-03
本文实例为大家分享了微信小程序实现联动选择器的具体代码，供大家参考，具体内容如下 picker 从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，...
微信小程序实现左右列表联动
10-17
在微信小程序中，实现左右列表联动是一种常见的交互设计，它允许用户在左侧的分类列表中选择一个类别，然后右侧的列表会根据所选类别展示对应的内容。这种功能常见于电商应用，帮助用户快速定位到他们感兴趣的商品。...
微信小程序滚动Tab实现左右可滑动切换
12-10
综上所述，实现微信小程序滚动Tab左右可滑动切换的核心在于合理利用`scroll-view`和`swiper`组件，结合数据绑定和事件处理，完成标题与内容的联动。同时，注意页面布局和适配，确保在各种屏幕尺寸下都能有良好的用户...
小程序-全屏动画滚动.zip
05-15
在小程序开发中，全屏动画滚动是一种常见的交互设计，它能为用户提供丰富的视觉体验和流畅的操作感受。这个压缩包“小程序-全屏动画滚动.zip”很可能是包含了一系列关于如何在微信小程序中实现全屏动画滚动的示例...
支付宝小程序实现省市区三级联动
11-20
在支付宝小程序中，实现省市区三级联动功能是一个常见的需求，特别是在需要用户选择详细地址的场景下。由于支付宝小程序的内置组件my.multiLevelSelect和picker不能完全满足这种需求，因此需要自定义实现。本文将...
小程序scroll-view左右滑动联动效果
hy3528的博客
07-20 919
效果图 <view class='cont-pro'> <!-- 左侧列表 --> <scroll-view scroll-y='true' scroll-with-animation="true" style="width:25%;"> <view class='pro_left'> <view wx:for="{{serviceTypes}}" wx:key='index' class="pro_title {{index==curr
小程序 点击tab 实现滑动切换元素的效果
ksyjy的博客
04-03 824
本想使用swiper实现功能，但是其中一个需要被切换的元素是地图页，滑动的时候会影响地图，想屏蔽手动滑动，只点击tab滑动，但是却把地图的滑动页屏蔽掉了。所以放弃这个方法，采用小程序的animation实现。 步骤： 1、创建一个动画实例 var animation = wx.createAnimation({ duration: 500, timingFunctio...
微信小程序滑动scroll-view
weixin_45638909的博客
06-17 1996
首先说一下思路： 1.高度是通过一个二维数组存储的，所以我们只需要先通过自己的实际情况算出这个高度即可。 let arr = [ [0, 522, 1002], [1602, 2004,2006,2010], [2364, 2766], [3126, 3528], [3888, 4290] ] 2.点击的时候我们直接通过index...
小程序轮播 滑动的时候另一个轮播图也跟着动
qq_41180335的博客
12-14 3326
好久没碰前端了，写个轮播都废了我这么大功夫。 最近闲着没事写一写小程序，有个要实现的功能是这样的： 如图，上面的色块是个轮播，下面的也是轮播。 滑动上面的轮播，下面的也跟着动，滑动下面的，上面也跟着动。 什么，你说哪个傻子会做这种功能？ 我啊。 其实做出来的效果还挺不错的，就看你往轮播里面放什么内容。 我做出来的效果是下面这样的： 当然你也可以自己体验一下效果： 还挺不错的吧，快夸夸我。 但是真的好久没写前端了呀，这点功能都让我写了好久。 还本来就菜。 话不多说，上点正菜吧。 思路及实现方式
小程序分类页面标题栏与内容栏的左右联动
qq_41620704的博客
06-04 1091
这段时间在产品中需要做一个商品分类列表的展示页面，产品是一个小程序商城。在这里对这一块做个梳理。 首先为了使左右两边都能够上下滑动，使用scroll-view组件 <!--这里引入了一段商品的列表项模板文件--> <import src ="../../../templates/shop/shop.wxml"/> <view class='sort-conta...
小程序分类页面左右联动滑动效果
m573556796的博客
01-19 303
wxml <view class="title"> <view class="titleItem {{index==currentDate?'active':''}}" data-index="{{index}}" bindtap="changeDate" wx:for="{{['周一','周二','周三','周四','周五','周六','周日']}}"> {{item}} <view class="titleItem2" wx:if="{{
微信小程序商品列表滑动联动商品分类
footman的博客
12-21 5972
效果仿x团小程序的商品列表滚动时，联动商品分类的效果。 简单描述思路： 1、商品列表做出不同分类的标记位置 2、监听商品列表滚动时，是否到达分类标记位置的高度 3、符合达到标记位置的高度后，触发商品分类栏目选中事件 注意：我的商品分类栏目和商品列表同属一个页面，但分别是两个不同的components，所以触发事件需要传参 正文部分： 先观察下图：留意红色标注部分，这个高度在获取商品列...
[微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式
xiaozhen0610的博客
08-01 1007
微信小程序下拉滚动选择器picker绑定数据的两种方式 本地数据绑定和wx.request(OBJECT) json数据绑定 1.本地数据绑定 （对象数组） Page({ data:{ //户型 这是一个本地的对象，然后绑定到页面上 pic_array: [ { id: 13, name: '1室1厅1卫' }, { id: 14, name: '1室2厅1卫' }, { id: 15, name: '2室1厅1卫' }, ..
小程序三级联动可多选
07-28
- *1* [微信小程序 自定义三级联动](https://blog.csdn.net/weixin_44201361/article/details/125103682)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值