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

滚动条组件

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"
			/>
相关推荐
梦梦代码精2 小时前
《全栈开源智能体:终结企业AI拼图时代》
人工智能·后端·深度学习·小程序·前端框架·开源·语音识别
Full Stack Developme3 小时前
Redis 持久化 备份 还原
前端·chrome
知南x6 小时前
【物联网视频监控系统----韦东山老师视频总结】(4)流媒体方案的实现之Nginx
物联网·nginx·音视频
知南x6 小时前
【物联网视频监控系统----韦东山老师视频总结】(2)三种视频监控方案介绍
物联网·音视频
5Gcamera9 小时前
执法记录仪、智能安全帽、smarteye平台常见问题解答FAQ
5g·音视频·智能安全帽·执法记录仪·smarteye
说私域10 小时前
基于AI智能名片链动2+1模式服务预约小程序的旅拍消费需求激发路径研究
大数据·人工智能·小程序
小白学大数据11 小时前
某程旅行小程序爬虫技术解析与实战案例
爬虫·小程序
小小王app小程序开发12 小时前
家政服务小程序特殊玩法开发全解析:技术实现+架构支撑+合规落地
小程序·架构
游戏开发爱好者812 小时前
2025年iOS应用上架App Store全指南,开发者必看
android·ios·小程序·https·uni-app·iphone·webview
熊猫钓鱼>_>13 小时前
当想象力成为生产力,AI视频生成如何重塑2026年的创作世界
人工智能·ai·aigc·音视频·提示词·ai视频