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

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

Vue左滑組件slider使用詳解

瀏覽:128日期: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
相關文章:
主站蜘蛛池模板: 排烟防火阀-消防排烟风机-正压送风口-厂家-价格-哪家好-德州鑫港旺通风设备有限公司 | 冷却塔减速机器_冷却塔皮带箱维修厂家_凉水塔风机电机更换-广东康明冷却塔厂家 | 釜溪印象网络 - Powered by Discuz!| 上海璟文空运首页_一级航空货运代理公司_机场快递当日达 | 棕刚玉_白刚玉_铝酸钙-锐石新材料| 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 中图网(原中国图书网):网上书店,尾货特色书店,30万种特价书低至2折! | 耐高温电缆厂家-远洋高温电缆| 雷蒙磨,雷蒙磨粉机,雷蒙磨机 - 巩义市大峪沟高峰机械厂 | 净水器代理,净水器招商,净水器加盟-FineSky德国法兹全屋净水 | 英国公司注册-新加坡公司注册-香港公司开户-离岸公司账户-杭州商标注册-杭州优创企业 | 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 硫化罐-胶管硫化罐-山东鑫泰鑫智能装备有限公司 | 烟台游艇培训,威海游艇培训-烟台市邮轮游艇行业协会 | 猪I型/II型胶原-五克隆合剂-细胞冻存培养基-北京博蕾德科技发展有限公司 | 欧必特空气能-商用空气能热水工程,空气能热水器,超低温空气源热泵生产厂家-湖南欧必特空气能公司 | 对辊式破碎机-对辊制砂机-双辊-双齿辊破碎机-巩义市裕顺机械制造有限公司 | 光伏支架成型设备-光伏钢边框设备-光伏设备厂家 | CTP磁天平|小电容测量仪|阴阳极极化_双液系沸点测定仪|dsj电渗实验装置-南京桑力电子设备厂 | 比士亚-专业恒温恒湿酒窖,酒柜,雪茄柜的设计定制 | 铁素体测量仪/检测仪/铁素体含量测试仪-苏州圣光仪器有限公司 | 线粒体膜电位荧光探针-细胞膜-标记二抗-上海复申生物科技有限公司 | 冷凝水循环试验箱-冷凝水试验箱-可编程高低温试验箱厂家-上海巨为(www.juweigroup.com) | 耐火砖厂家,异形耐火砖-山东瑞耐耐火材料厂 | CPSE安博会| 二手电脑回收_二手打印机回收_二手复印机回_硒鼓墨盒回收-广州益美二手电脑回收公司 | 合景一建-无尘车间设计施工_食品医药洁净车间工程装修总承包公司 | 网带通过式抛丸机,,网带式打砂机,吊钩式,抛丸机,中山抛丸机生产厂家,江门抛丸机,佛山吊钩式,东莞抛丸机,中山市泰达自动化设备有限公司 | 培训一点通 - 合肥驾校 - 合肥新亚驾校 - 合肥八一驾校 | 带压开孔_带压堵漏_带压封堵-菏泽金升管道工程有限公司 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 温控器生产厂家-提供温度开关/热保护器定制与批发-惠州市华恺威电子科技有限公司 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 | 沟盖板_复合沟盖板厂_电力盖板_树脂雨水篦子-淄博拜斯特 | 纸塑分离机-纸塑分离清洗机设备-压力筛-碎浆机厂家金双联环保 | 冲锋衣滑雪服厂家-冲锋衣定制工厂-滑雪服加工厂-广东睿牛户外(S-GERT) | EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | 大米加工设备|大米加工机械|碾米成套设备|大米加工成套设备-河南成立粮油机械有限公司 | 两头忙,井下装载机,伸缩臂装载机,30装载机/铲车,50装载机/铲车厂家_价格-莱州巨浪机械有限公司 | 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 反渗透水处理设备|工业零排放|水厂设备|软化水设备|海南净水设备--海南水处理设备厂家 |