小程序click-scroll组件设计
微信(小程序)  /  管理员 发布于 3年前   301
一. 背景
有些业务需求,要求前端展示的内容多时可以通过scroll的形式拖拉查看,但是太多的滚动条又造成页面太乱,于是封装了这个click-scroll 组件。在组件上设定好展示的位置和空间大小,在组件内部放置实际要展示的内容,实际展示的内容宽度或长或短都由此组件来控制。
二. 功能
组件内的内容宽度超过组件宽度时,组件两侧会自动出现『左右移动』交互。
当内部展示的内容超过组件的可见区域时,可以在组件的可见区域单击拖动查看内容
三. 背景知识,元素大小的测量
1.偏移量(offset dimension):
元素在屏幕上占用的可见的所有空间,元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小。由四个值决定:offsetHeight、offsetWidth、offsetLeft和offsetRight。
2.客户区大小(client dimension)
元素内容及其内边距所占据空间的大小,滚动条占用的空间不计算在内。
3.滚动大小(scroll dimension)
包含滚动内容的元素的大小。
四. 组件设计思路
五. 使用文档
slot:
参数 | 说明 | 类型 |
---|---|---|
content | 组件实际要展示的内容 | dom |
我是实际要展示的内容啊啊啊啊啊……
六. 组件源码
暂无数据以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
- 微信小程序 wepy框架与iview-weapp的用法详解
- 微信小程序 MinUI组件库系列之badge徽章组件示例
- 小程序组件之自定义顶部导航实例
- 微信小程序 image组件遇到的问题
- 微信小程序 swiper 组件遇到的问题及解决方法
- 微信小程序动态添加view组件的实例代码
- 新手快速入门微信小程序组件库 iView Weapp
上一条:
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
下一条:
微信小程序版本自动更新的方法Top
- 相关文章
- 小程序开发之跳转微信直播示例api(0个评论)
- 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
- 小程序开发之多端框架:taro(0个评论)
- 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
- 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
- 近期文章
- windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
- 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
- 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
- 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
- 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
- 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
- 在go语言中使用GoRoutines实现高性能并发批量调用api示例(0个评论)
- Docker撤回受争议的收费方案,又可以继续使用docker了(0个评论)
- 在go语言生成唯一ID之SnowFlake算法(0个评论)
- ChatGPT再出新功能,推出插件功能,能联网、搜索了(0个评论)
- 近期评论
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号