电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue左滑組件slider使用詳解

瀏覽:127日期:2022-12-04 14:56:35

slider組件與swiper組件不同,slider滑動時并不翻頁,實現的是左滑時,顯示右側內容的功能

Vue左滑組件slider使用詳解

1、主要思路

思路和swiper組件類似,主要的也就是對三個觸摸事件的處理:touchstart、touchmove、touchend

在touchstart事件處理程序中記錄一些初始值,比如原始坐標,偏移距離;在touchmove事件處理程序中計算實時滑動的距離,讓元素隨之一起偏移,與swiper不同的是,slider在左滑之前,不能右滑,以及滑動時,右側元素的寬度要同步變化;在touchend事件處理程序中計算最終的滑動距離,左滑且大于闕值則滑動固定值,右滑或小于闕值則回到起始位置,右側元素的寬度要同步變化。

slider組件可以接收三個參數:

rightWidth: 右側滑出寬度的百分比

isClickBack: 點擊是否收起右側

isMainSlide: 左側是否滑動(false則覆蓋左側)

2、代碼實現

頁面結構:有兩個slot來展示左右兩邊的內容

<template> <div ref='slider'> <div @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend'> <slot name='main'></slot> </div> <div ref='right'> <slot name='right'></slot> </div> </div></template>

初始設置:記錄頁面寬度,根據參數isMainSlide來判斷滑動的元素

mounted () { this.pageWidth = document.documentElement.clientWidth this.sliderEle = this.isMainSlide ? this.$refs.slider : this.$refs.right}

事件處理:

touchstart (e) { this.originalPos = e.touches[0].pageX const transform = this.sliderEle.style.transform this.originalLeft = Number(transform ? transform.split(’(’)[1].split(’px’)[0] : 0) this.oriRigWidth = this.originalLeft < 0 ? Number(this.$refs.right.style.width.split(’px’)[0]) : 0},touchmove (e) { let moveDistance = e.touches[0].pageX - this.originalPos // >0 右滑,<0 左滑 if (moveDistance > 0 && this.originalLeft >= 0) { // 未向左邊滑動時,不能右滑 return false } this.doSlide(moveDistance / 2 + this.originalLeft) // 除以2來控制滑動速度},touchend (e) { const moveDistance = e.changedTouches[0].pageX - this.originalPos // >0 右滑,<0 左滑 let distance if (!this.isClickBack && moveDistance === 0) { // 點擊時不收起右側 return false } if ((-moveDistance) > 50) { // 向左滑動超過闕值時,右側滑出固定距離 distance = this.pageWidth * this.rightWidth / 100 } else { // 向左滑動未超過闕值,或向右滑動時,回原位 distance = 0 } this.doSlide(-distance, true)},/** * 滑動方法---位置變化 && 右側寬度變化 * @param {Number} distance 滑動距離 * @param {Boolean} animate 滑動是否有動畫效果 */doSlide (distance, animate = false) { this.sliderEle.style.transform = `translateX(${distance}px)` this.$refs.right.style.width = -distance + ’px’ if (this.isMainSlide) { this.sliderEle.style.transition = animate ? ’transform .5s’ : ’initial’ this.$refs.right.style.transition = animate ? ’width .5s’ : ’initial’ } else { this.sliderEle.style.transition = animate ? ’transform .5s, width .5s’ : ’initial’ }}

3、組件使用

父組件可以調用slider組件的doSlide()方法來實現點擊喚出右側元素

<t-slider class='slider'> <template slot='main'>左側滑動</template> <template slot='right'> <div class='edit'>編輯</div> <div class='delete'>刪除</div> </template></t-slider><t-slider :rightWidth='rightWidth' :isMainSlide='false'> <template slot='main'> <div>覆蓋左側</div> <div @click='showRight'>點擊喚出</div> </template> <template slot='right'> <div class='newContent'>newContent</div> </template></t-slider><t-slider :isClickBack='false'> <template slot='main'>點擊不收起</template> <template slot='right'> <div class='edit'>編輯</div> <div class='delete'>刪除</div> </template></t-slider>

components: {TSlider},data () { return { pageWidth: null, rightWidth: 80 }},mounted () { this.pageWidth = document.documentElement.clientWidth}, methods: { showRight () { this.$refs.mainSlider.doSlide(-this.pageWidth * this.rightWidth / 100, true) }}

4、效果展示

Vue左滑組件slider使用詳解

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 山东石英砂过滤器,除氟过滤器「价格低」-淄博胜达水处理 | 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | 杭州代理记账多少钱-注册公司代办-公司注销流程及费用-杭州福道财务管理咨询有限公司 | 高低温老化试验机-步入式/低温恒温恒湿试验机-百科 | 深圳法律咨询【24小时在线】深圳律师咨询免费 | 直线模组_滚珠丝杆滑台_模组滑台厂家_万里疆科技 | CXB船用变压器-JCZ系列制动器-HH101船用铜质开关-上海永上船舶电器厂 | 酒瓶_酒杯_玻璃瓶生产厂家_徐州明政玻璃制品有限公司 | 山东锐智科电检测仪器有限公司_超声波测厚仪,涂层测厚仪,里氏硬度计,电火花检漏仪,地下管线探测仪 | IHDW_TOSOKU_NEMICON_EHDW系列电子手轮,HC1系列电子手轮-上海莆林电子设备有限公司 | 济南保安公司加盟挂靠-亮剑国际安保服务集团总部-山东保安公司|济南保安培训学校 | 常州减速机_减速机厂家_常州市减速机厂有限公司| 隐形纱窗|防护纱窗|金刚网防盗纱窗|韦柏纱窗|上海青木装潢制品有限公司|纱窗国标起草单位 | 流变仪-热分析联用仪-热膨胀仪厂家-耐驰科学仪器商贸 | 液氮罐_液氮容器_自增压液氮罐-北京君方科仪科技发展有限公司 | 青海电动密集架_智能密集架_密集架价格-盛隆柜业青海档案密集架厂家 | 运动木地板厂家_体育木地板安装_篮球木地板选购_实木运动地板价格 | 石膏基自流平砂浆厂家-高强石膏基保温隔声自流平-轻质抹灰石膏粉砂浆批发-永康市汇利建设有限公司 | 郑州宣传片拍摄-TVC广告片拍摄-微电影短视频制作-河南优柿文化传媒有限公司 | 屏蔽泵厂家,化工屏蔽泵_维修-淄博泵业 | 杭州中央空调维修_冷却塔/新风机柜/热水器/锅炉除垢清洗_除垢剂_风机盘管_冷凝器清洗-杭州亿诺能源有限公司 | 消泡剂-水处理消泡剂-涂料消泡剂-切削液消泡剂价格-东莞德丰消泡剂厂家 | 机构创新组合设计实验台_液压实验台_气动实训台-戴育教仪厂 | 合肥注册公司|合肥代办营业执照、2024注册公司流程 | 青州开防盗门锁-配汽车芯片钥匙-保险箱钥匙-吉祥修锁店 | 智能垃圾箱|垃圾房|垃圾分类亭|垃圾分类箱专业生产厂家定做-宿迁市传宇环保设备有限公司 | 视觉检测设备_自动化检测设备_CCD视觉检测机_外观缺陷检测-瑞智光电 | 北京软件开发_软件开发公司_北京软件公司-北京宜天信达软件开发公司 | 济南铝方通-济南铝方通价格-济南方通厂家-山东鲁方通建材有限公司 | 高清视频编码器,4K音视频编解码器,直播编码器,流媒体服务器,深圳海威视讯技术有限公司 | 铝合金重力铸造_铝合金翻砂铸造_铝铸件厂家-东莞市铝得旺五金制品有限公司 | 河南包装袋厂家_河南真空袋批发价格_河南服装袋定制-恒源达包装制品 | 艺术涂料|木纹漆施工|稻草漆厂家|马来漆|石桦奴|水泥漆|选加河南天工涂料 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 大巴租车平台承接包车,通勤班车,巴士租赁业务 - 鸿鸣巴士 | 铜镍-康铜-锰铜-电阻合金-NC003 - 杭州兴宇合金有限公司 | 阁楼货架_阁楼平台_仓库仓储设备_重型货架_广州金铁牛货架厂 | 步进驱动器「一体化」步进电机品牌厂家-一体式步进驱动 | 聚氨酯复合板保温板厂家_廊坊华宇创新科技有限公司 | 保定市泰宏机械制造厂-河北铸件厂-铸造厂-铸件加工-河北大件加工 |