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

滚动条组件

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"
			/>
相关推荐
Sayai8 小时前
ComfyUI+混元视频实战:12G 显存跑 13G 模型,5 分钟出片(国产开源,附模型与工作流)
人工智能·aigc·音视频·comfyui·hunyuanvideo·混元视频
ACP广源盛1392462567311 小时前
项目评估记录:4K 视频墙方案调研,GSV9001E @ACP参数与工程问题记录
硬件架构·音视频·硬件工程·视频·国产芯片
Frag0ut11 小时前
获取Chrome官方安装包:离线版安装风险避坑指南
chrome·google·谷歌浏览器·安装包·chromesetup.exe·在线安装包·离线版
Initialize-le14 小时前
systemd 服务起不来?五步排查法
前端·chrome
派小心.14 小时前
网站统计采样数据的误差核对
大数据·服务器·前端·数据库·人工智能·小程序·数据分析
河北清兮网络科技15 小时前
广告联盟 APP 介绍:搭建属于自己的流量变现平台
小程序·app·产品经理·短剧app·广告联盟
AI视频工具指南16 小时前
怎么用 AI 做一两分钟的小故事视频?从结尾倒推故事
人工智能·aigc·音视频
AI视频工具指南17 小时前
AI短剧怎么做?一个矛盾怎样接着讲三集
人工智能·aigc·音视频
酷虎软件17 小时前
视频加字幕怎么制作
java·前端·音视频
码点滴18 小时前
67000 星的开源语音引擎:用 VoiceStudio 搭建本地语音克隆与多语言配音流水线
开源·音视频