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

滚动条组件

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"
			/>
相关推荐
YWamy1 小时前
播放器类音视频 SDK 选型指南:主流产品对比与适配建议
音视频
weixin_446260852 小时前
HumanForge:基于多智能体伪造推理的以人为中心深度伪造视频基准
人工智能·音视频
美狐美颜SDK开放平台2 小时前
从RTC到AI美颜:直播APP开发中的直播美颜SDK技术架构解析
人工智能·音视频·实时音视频·美颜sdk·视频美颜sdk·美颜api
李顿波2 小时前
Chrome 扩展程序 MV3 架构组件概览
前端·chrome·浏览器插件
潜创微科技2 小时前
一根网线传 4K60:基于 IT9205 的网线延长方案,把 HDMI 送到 100 米外
音视频
GHL2842710903 小时前
安装chrome浏览器
前端·chrome
蓝田~3 小时前
AI 图片与视频处理 — 从原理到实践
网络·人工智能·音视频
乐橙开放平台5 小时前
巡店系统笔记:乐橙 listDeviceDetailsByPage 台账 + bindDeviceLive 辅码流最小闭环
网络·笔记·物联网·自动化·音视频·智能家居
鲲穹AI全能助理5 小时前
实用音频合成工具分享:灵境配音 使用场景与功能说明
ffmpeg·音视频
AI2中文网6 小时前
App Inventor 2 音频播放器 vs 音效 vs 视频播放器:三个媒体组件,选错了App直接卡死
android·音视频·媒体