可以滑动选择的图片选择器的实现思路

直接继承RecyclerView实现可滑动的图片选择所遇到的问题:

左右滑动和上下滑动的事件拦截问题,导致滑动选择时体验过差(左右滑动的时候容易触发上下滑动)、

(⊙o⊙)… 以失败告终!,下面记录一下新的思路 :

1. 触摸事件的问题解决方案:
自定义GalleryView使其继承自FrameLayout或者其他已经实现好的布局,里面填充RecyclerView用于展示手机中的图片,外层包裹一层布局的目的是为了处理RecyclerView的触摸事件(当手指左右滑动进行图片选择时并且手指一直没有抬起的话,将此事件进行拦截交由最外层的FrameLayout进行处理,当手指抬起时,重新将事件返还给RecyclerView)
2.如何计算手指滑动的位置所对应待选择图片的item下标:
思路是这样的,首先获取用来显示图片的那个item布局的宽高,宽度和高度有了之后就可以通过数学运算来计算item所在位置了,当然计算的时候要考虑到margin这个属性值,以确保选择的精确度。

下面就可以通过监听最外层FrameLayout的滑动事件,通过当前滑动位置的x点坐标/item的宽度就可以得到水平方向中item所在的位置下标,对于当前选择的item所在列的计算则需要监听RecyclerView的OnScrollListener事件通过累加dy的值也就是每次竖直滑动的间距,然后将这个累加的间距加上 点击位置的y坐标 之后除item的高度,这样就获取到了竖直方向item所在的下标。得到这两个下标位置就可以定位到具体的item然后再刷新界面就ok了。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现滑动时间选择器效果,可以使用第三方组件库,比如element-ui或者vant-ui。以下是使用element-ui的示例代码: 1. 安装element-ui ``` bash npm install element-ui --save ``` 2. 在main.js中引入element-ui ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 在组件中使用el-time-picker组件 ```html <template> <div> <el-time-picker v-model="time" :picker-options="pickerOptions" placeholder="选择时间" :format="format" :clearable="false" :readonly="true" :editable="false" :arrow-control="false" ></el-time-picker> </div> </template> <script> export default { data() { return { time: '', pickerOptions: { start: '00:00', step: '00:30', end: '23:30' }, format: 'HH:mm' } } } </script> ``` 以上代码中,el-time-picker是element-ui中的时间选择器组件,参数说明如下: - v-model: 绑定的时间值 - picker-options: 选择器选项,比如开始时间、结束时间、步长等 - placeholder: 未选择时间时的提示文字 - format: 时间格式 - clearable: 是否显示清除按钮 - readonly: 是否只读 - editable: 是否可编辑 - arrow-control: 是否显示箭头控制按钮 通过设置picker-options可以实现滑动选择时间的效果,其中start、end和step分别表示可选时间的起始值、结束值和步长,这里设置步长为30分钟。format指定时间的格式为HH:mm,即小时:分钟。 这样就可以实现滑动时间选择器的效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值