2022-11 wx：图片预览-获取视频标签-自定义scroll-view滚动条-页面滚动防抖-滚到底部

最新推荐文章于 2022-12-13 09:59:35 发布
最新推荐文章于 2022-12-13 09:59:35 发布
阅读量111 收藏
点赞数
分类专栏： wx 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49752665/article/details/127682133
版权
本文介绍了在微信小程序中实现图片预览、获取视频标签、自定义scroll-view滚动条、页面滚动防抖及滚到底部的实现方法。通过data-ims绑定图片数组，使用动态ID swpVideo+index 获取视频标签，利用CSS和JS模拟滚动条，并应用防抖技术优化滚动到底部的触发。
摘要由CSDN通过智能技术生成

1.图片预览

wxml：data-ims = “图片数组”
在这里插入图片描述

2.获取视频标签

swpVideo+index 为视频在遍历的时候 绑定的动态ID
在这里插入图片描述

3.自定义scroll-view滚动条

效果：
在这里插入图片描述
html：模拟一个滚动条
在这里插入图片描述
监听滚动
在这里插入图片描述

css：
在这里插入图片描述
js：

最低0.47元/天 解锁文章
Lucy0612
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp中使用scroll-view实现图片滑动效果（含点击预览以及长按下载操作）
weixin_43242112的博客
08-15 5319
uniapp中使用scroll-view实现图片滑动效果（含点击预览以及长按下载操作）一、效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/20200815113843330.gif#pic_center)二、注意要点三、代码 一、效果图 二、注意要点 1.在真机模拟时，本地图片不支持下载，可以使用百度上的网络图。 2.如果是图片，建议使用绝对路径。使用/代表项目的根目录。 3.如果是微信小程序调试，不支持本地图片的预览。 三、代码 template模板中： &lt
微信小程序带图片滚动弹窗scroll-view
weixin_43046729的博客
06-26 811
最近要实现一个登陆后直接展示一个手册弹窗的功能，然后发现小程序在手机端有些许不好使，所以根据小程序实现了一下，主要i用到的有scroll-view的滑块模组，然后就是思维流程了 希望可以和大家共勉 //wxml <view class="modalDlg" wx:if="{{ifshow}}"> <scroll-view scroll-y style="width: 100%; height: 400px;" refresher-enabled="{{true}}"
小程序中的轮播图
weixin_43167662的博客
12-13 3579
小程序轮播图
uni-app制作一个左侧导航scroll-view组件，并和页面主体展示联动
weixin_45966674的博客
06-04 3094
uni-app通过scroll-view组件uni-app制作一个左侧导航组件，并和页面主体展示联动
列表索引 用Taro视图容器scroll-view配合索引显示（vue 微信小程序 支付宝小程序 ）
a532443304的博客
06-07 832
列表索引 用Taro视图容器scroll-view配合索引显示（vue 微信小程序 支付宝小程序）
滚动ScrollView---数组存放图片，设置3个滚动视图，用来滑动多张图片
人生得意须尽欢，做一个快乐的程序猿~~~
06-01 1860
问题描述：循环滑动切换n多张图片，不事先加载完成，现用现取。 解题思路：将要显示的图片存放在数组中，设置3个滚动视图，左边视图，正在显示的视图，右边视图 实现代码如下： //  ViewController.m #import "ViewController.h" #define kWith self.view.fram
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我在.wxss里设置了高度为100%: .scrollStyle{ width: 100%; height: 100%; display: flex; flex-direction: column; } 居然无效，...
微信小程序-scroll-view滚动到指定位置（类似锚点）
03-29
本文作者：莫兰迪不会没有瓶子，来自原文地址 先来说一下官网例子吧 ...scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
主要介绍了详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
微信小程序scroll-view的滚动条设置实现
10-15
总之，微信小程序的 `scroll-view` 滚动条设置涉及到 CSS 伪元素的使用和平台兼容性处理。开发者需要对 CSS 有一定的了解，并结合实际项目需求，灵活调整和优化滚动条的样式和性能。在遇到特定平台的问题时，及时...
uniapp 基础
qq_42451776的博客
08-10 403
文章目录构建项目的结构项目中常用的模块轮播图scroll -view 滑动模块异步ajax防抖操作页面跳转的方式页面弹窗提示下方弹出功能窗，图片预览，图片上传自定义导航栏 构建项目的结构 1.pages.json基础配置 { "pages": [ { "path": "pages/index/index", //前面不能加 / "style": { "navigationBarTitleText": "主页",
2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
weixin_49752665的博客
11-25 1732
如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第三行标签盒子也设置flex布局。如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第一行也设置flex布局。再对第一行公司名称设置flex：1，实现不设置文字宽度的超出隐藏。另：以上两种情况，右侧盒子无需设置flex：1。设置最小高度是为了，当第三行标签不存在的时候，右侧盒子高度会小于图片高度，由于父元素设置了aline-items：center，右侧盒子会居中。
2022-3-WX-按钮带参-自定义方法名-全局样式-组件生命周期-更改data中的属性-触发子组件-判断手机-设置tabbar
weixin_49752665的博客
08-02 1536
funName = "chooseYet" bind : chooseYet = "想要触发的方法"
uniapp封装加载动画
weixin_49752665的博客
06-11 1223
1.写个组件，计算属性控制显隐 2.vuex新增个属性，在网络请求中引入vuex 3.引入 4.在有网络请求的页面引入组件
wx：scroll-view横向滚动 - 回到顶部 - 图片预览 - 图片src转base - 本地图片设为背景图片
weixin_49752665的博客
04-13 306
我也不知道我也不知道我也不知道我也不知道我也不知道
wx处理富文本中的图片-wx富文本图片预览 -uni-parse 处理富文本
weixin_49752665的博客
04-21 207
【代码】wx处理富文本中的图片-wx富文本图片预览 -uni-parse 处理富文本。
wx获取状态栏高度
weixin_49752665的博客
04-14 160
1.生命周期需为beforeMount 2.把它写入html 3.红色部分高度一般是40px
uniapp scroll-view滚动到底部
最新发布
09-25
在uniapp中，要将scroll-view滚动到底部，可以使用scroll-into-view属性和scrollIntoIndex变量。在scroll-view组件上添加scroll-into-view属性，将其绑定到scrollIntoIndex变量。然后，将scrollIntoIndex变量设置为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值