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

滚动条组件

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"
			/>
相关推荐
测试修炼手册21 小时前
[测试工具] Playwright Skill 和 Codex Chrome 浏览器操控的异同
前端·chrome·测试工具
维双云21 小时前
从零到一:一份关于“做小程序的步骤”的完整实操指南
小程序
Maydaycxc1 天前
企业内网 RPA 离线部署实践:从选型到落地的完整方案
运维·chrome·python·selenium·自动化·rpa
lifewange1 天前
Redis 集合(Set)运算完全指南
数据库·chrome·redis
weixin_408318041 天前
2026企业直播平台选型:三大主流方案技术对比
音视频
东方佑2 天前
观测的连续性:从波粒二象性诠释生成式 AI 中音视频与图像的表征范式
人工智能·音视频
剑神一笑2 天前
Linux crontab 命令详解:定时任务的底层实现与实战技巧
linux·运维·chrome
reasonsummer2 天前
【教学类-160-30】20260513 AI视频培训-练习030“豆包AI视频《春江花月夜》+豆包图片风格:风景
音视频·豆包
ZC跨境爬虫2 天前
跟着 MDN 学 HTML day_58:(构建行星数据表——HTML表格高级实战指南)
前端·javascript·ui·html·音视频
reasonsummer2 天前
【教学类-160-34】20260517 AI视频培训-练习034“豆包AI视频《国旗国旗我爱你》(演唱:04ZXY)+豆包图片风格:港风动漫
音视频·豆包图片