【小程序 滚动条 滑块 音频 组件】

滚动条组件

1. scroll-view
视图容器内
2. scroll-x
允许横向滚动
3. scroll-y
允许纵向滚动
4. scroll-into-view="childs"
绑定子元素
5. scroll-top
竖向滚动条位置
6. scroll-left
横向滚动条位置
7. scroll-into-view
值应为某子元素id(id不能以数字开头)设置哪个方向可滚动,则在哪个方向滚动到该元素
8. scroll-with-animation
在设置滚动条位置时使用动画过渡

绑定滚动条事件:

bind:scroll="scroll"

注:scroll( ) -- 函数事件名

固定定位

  1. scroll-x 允许横向滚动
  2. scroll-y 允许纵向滚动
bash 复制代码
	<scroll-view class="box" 
			scroll-x="{{true}}" 
			scroll-y="{{true}}"
			bind:scroll="scroll">
			<view class="boxs">
			<!-- text 的值被固定在一个位置 -->
			<text style="{{sty}}">固定位置</text>
	</scroll-view>
	

wxml中设置函数名( ){ }

bash 复制代码
	 函数(){
	 if(e.detail.scrollTop>=1){
				this.setData({
				// text 的值被固定在一个位置  
				// 固定到一定距离会显示背景
				// wx.pageScrollTo()
				// slider
					sty:"position:fixed;background-color:red;"
				})
			}
			else if(e.detail.scrollTop>=2){
			e.detail.scrollTop = 0 ;
		}
	}

slider 滑块

slider 滑块 设置声音大小 亮度等...

bash 复制代码
		<slider bindchange="SliD"
				bindchanging="SliD"
				step="1"
				min="2" 
				max="20"
				show-value="true"
				value="5"
				activeColor="blue"
				block-size="5"
				backgroundColor="red"
			/>
相关推荐
Android系统攻城狮8 小时前
Linux Gstreamer深度解析之gst_audio_encoder_set_frame_max调用流程与实战(六十一)
android·linux·运维·音视频·gstreamer音视频·音视频进阶·gstreamer音视频进阶
yu俞娥宝13 小时前
Chrome插件开发实战进阶(Manifest V3):通信原理、高级API、工程优化与上架避坑(第二篇)
chrome
Helix25016 小时前
Chrome 扩展精选与权限管理:打造安全高效的浏览器工具箱
chrome·工具箱·扩展安全·扩展权限·扩展推荐·浏览器扩展管理·浏览器效率
redfred18 小时前
HyperFrames 部署教程:5.6 万 Star 开源「写 HTML 出视频」框架,Windows 从零上手(CLI 三条命令 + 7 个避坑)
ffmpeg·开源·自动化·html·音视频
martindelophy19 小时前
用自然语言剪视频:我们在 Timeline Studio 中实现了 ChatCut 对话剪辑
android·音视频
特视界说19 小时前
没有完整 3D 模型,能做产品三维动画吗?
3d·微信·音视频·新浪微博
今日热点19 小时前
小程序主体变更公证线上办理教程|2026 最新材料规范与审核避坑
小程序
特视界说19 小时前
产品宣传动画和企业宣传片有什么区别,应该先做哪个?
微信·音视频·新浪微博·新人首发
bluebonnet2719 小时前
【docker】容器内映射外部音频驱动
docker·容器·音视频
Ai-_Man19 小时前
从聊天框到正式文档:AI导出鸭瞄准AI大模型应用的“最后一公里”
开发语言·前端·javascript·人工智能·小程序