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

滚动条组件

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"
			/>
相关推荐
入瘾13 分钟前
etcd 显示连接失败
数据库·chrome·etcd
AI周红伟18 分钟前
AI自动盯盘与定时行情分析:OpenClaw股票辅助Agent集成完整使用指南-周红伟
运维·服务器·人工智能·音视频·火山引擎
YWamy5 小时前
国产视频会议核心技术解析:架构、特性与全场景落地
音视频
2501_915918415 小时前
iOS性能测试工具 Instruments、Keymob的使用方法 不局限 FPS
android·ios·小程序·https·uni-app·iphone·webview
Chengbei116 小时前
利用 LibreNMS snmpget 配置篡改实现 RCE 的完整攻击链
人工智能·web安全·网络安全·小程序·系统安全
REDcker7 小时前
WebRTC 接收端音频流畅低延迟播放:原理与源码对照(NetEQ / Opus)
音视频·webrtc
Z_Wonderful8 小时前
在 Next.js 中,使用 [id] 或 public 作为文件夹或文件名是两种完全不同的概念,分别对应 动态路由 和 静态资源托管
javascript·网络·chrome
小杰3129 小时前
ZLMediakit源码梳理
服务器·音视频·流媒体·zlmediakit
ai产品老杨10 小时前
异构计算时代的视频底座:基于 X86/ARM 与 GPU/NPU 的边缘云协同架构解析
arm开发·架构·音视频
油丶酸萝卜别吃11 小时前
本地调试跨域问题:关闭 Chrome 同源策略的技巧
前端·chrome