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

滚动条组件

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"
			/>
相关推荐
音视频牛哥1 天前
Android音视频开发:基于 Camera2 API 实现RTMP推流、RTSP服务与录像一体化方案
android·音视频·安卓camera2推流·安卓camera2推送rtmp·安卓camera2 rtsp·安卓camera2录制mp4·安卓实现ipc摄像头
John_ToDebug1 天前
深度解析 Chromium 浏览器 UI 刷新机制与 ThemeService 的核心作用
chrome·windows·ui
林鸿群1 天前
window编译chromium源码
chrome·chromium·源码编译
summerkissyou19871 天前
android13-audio-AudioTrack-写数据流程
android·音视频
卢卡上学1 天前
【AI工具】Coze智能体工作流:5分钟制作10个10w+治愈视频,无需拍摄剪辑
人工智能·音视频·ai视频·ai智能体
zimoyin1 天前
WSL音频转发配置流程:WSL2/WSL1全适配
linux·音视频·wsl·虚拟机·ekho
优选资源分享1 天前
foobar2000 2.25.3 汉化版:Windows 音频播放器
音视频
mcu20181 天前
3.5mm音频口对外输出的音量和电压测试
音视频
努力glow .1 天前
彻底解决VMware下ROS2中gazebo启动失败的问题
前端·chrome
AAA阿giao1 天前
浏览器底层探秘:Chrome的奇妙世界
前端·chrome·gpu·多进程·单进程·v8引擎·浏览器底层