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

滚动条组件

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"
			/>
相关推荐
论迹复利6 小时前
Sniff 省电模式参数调优——续航与音频稳定性平衡实操
音视频·sniff·bt·功耗、
星核0penstarry8 小时前
从 Dialog-RSN-1 看语音 Agent 走向:企业如何评估音频原生模型与 API 服务
人工智能·音视频·音频·api
水瓶夜之10 小时前
.NET 中的新增功能系列文章——.NET SDK中的新增功能
前端·chrome·.net
2501_9159090610 小时前
iOS 应用反调试技详解术 检测调试器的原理与防护实践
android·ios·小程序·https·uni-app·iphone·webview
明如正午10 小时前
【python】Python + OpenCV 实现视频关键帧提取与智能去重
python·opencv·音视频
呆呆敲代码的小Y10 小时前
5 分钟上手 OpenMontage:把 AI 编程助手变成视频工作室
人工智能·aigc·音视频·ai视频生成·claude code·openmontage
奈斯先生Vector11 小时前
大模型 Agentic Workflow 架构解构:异构 API 调度与 Token 路由的多模态系统设计
开发语言·前端·架构·prompt·aigc·音视频
海带紫菜菠萝汤11 小时前
FFmpeg.wasm 实践:在浏览器中运行 FFmpeg 的能力边界与性能瓶颈
前端·javascript·ffmpeg·音视频·wasm
甜甜小酒窝11 小时前
通过Canvas在网页中将后端发来的一帧帧图片渲染成“视频”的实现过程
音视频
DogDaoDao11 小时前
深度学习增强的视频压缩框架:Neutron Star 如何超越 VVC
人工智能·深度学习·音视频·视频编解码·h266·vvc·视频压缩