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

滚动条组件

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 允许纵向滚动

	<scroll-view class="box" 
			scroll-x="{{true}}" 
			scroll-y="{{true}}"
			bind:scroll="scroll">
			<view class="boxs">
			<!-- text 的值被固定在一个位置 -->
			<text style="{{sty}}">固定位置</text>
	</scroll-view>
	

wxml中设置函数名( ){ }

	 函数(){
	 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 滑块 设置声音大小 亮度等…
在这里插入图片描述

		<slider bindchange="SliD"
				bindchanging="SliD"
				step="1"
				min="2" 
				max="20"
				show-value="true"
				value="5"
				activeColor="blue"
				block-size="5"
				backgroundColor="red"
			/>

相关推荐

  1. 使用vue3+ts封装一个Slider组件

    2024-06-06 19:50:07       5 阅读
  2. 程序页面滚动

    2024-06-06 19:50:07       13 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-06 19:50:07       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-06 19:50:07       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-06 19:50:07       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-06 19:50:07       20 阅读

热门阅读

  1. 小程序vant DropdownMenu 下拉菜单无法关闭

    2024-06-06 19:50:07       9 阅读
  2. Kotlin 委托

    2024-06-06 19:50:07       9 阅读
  3. 2024中国机器人开发大会

    2024-06-06 19:50:07       7 阅读
  4. 探索Sass:Web开发的强大工具

    2024-06-06 19:50:07       11 阅读
  5. Spark SQL内置函数

    2024-06-06 19:50:07       7 阅读
  6. 【Linux】批量恢复文件权限

    2024-06-06 19:50:07       9 阅读
  7. 在Spring Boot项目中使用Redisson实现延迟执行

    2024-06-06 19:50:07       8 阅读