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

滚动条组件

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 小时前
pbtk v 3.5.0安装与使用--生信工具084
前端·chrome
heimeiyingwang6 小时前
【架构实战】FinOps云成本优化实践
前端·chrome·架构
hhb_6187 小时前
C Shell 基础语法与高阶运维实战指南
运维·c语言·chrome
VOOHU_20189 小时前
VOOHU沃虎:音频变压器的主要作用是什么?什么情况下必须使用?
网络·物联网·音视频·电子元器件
黄华SJ520it9 小时前
139小程序商城模式开发
小程序·软件需求·系统开发
Greg_Zhong10 小时前
详细说下小程序中使用canvas的体验
小程序·canvas绘制·canvas绘制内容溢出·绘制内容模拟器不正常·绘制内容真机正常
APIshop10 小时前
小红书笔记视频详情接口深度解析:smallredbook.item_get_video_pro
数据库·笔记·音视频
AI服务老曹12 小时前
【架构深评】深度解析异构计算下的 AI 视频管理平台:从 GB28181 接入到 X86/ARM 容器化部署的全链路实战
人工智能·架构·音视频
小羊Yveesss13 小时前
2026 多门店小程序如何提升效率?连锁门店降本增效实操指南,数字化转型必看
大数据·小程序
2501_9419820513 小时前
提高私域转化率:如何通过 API 自动发送小程序卡片?
小程序·机器人·自动化·企业微信·rpa