js_脚本之家

本文实例为大家分享了weex
slider实现滑动底部导航功能的具体代码,供大家参考,具体内容如下

前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到,于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目
,有需要的同学可以在项目中 npm install ly-tab -Swww.js8331.com,或者
yarn add ly-tab 使用,具体用法下面会讲到。

这里主要是使用了weex 的 slider 实现了可以滑动的底部导航框架

js_脚本之家。好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本都是移动端项目,而且框架主要用的是Vue。做过移动端或者用过移动端APP的同学肯定会发现很多时候都会有类似上面这种有滑动效果的tab导航栏,相信大家肯定在掘金的首页就看到过。

这里最主要的几个方法,如果光是看weex的官方文档,可能很痛苦,因为有一些功能虽然代码里已经写好,但是他并没有写出来,希望官方的文档能够尽快的完善起来

实现思路

实现这样的功能,首先是一个slider的用法,这个官方文档是用这个来给大家做轮播图的。

当时的项目中恰好也有这种需求,于是我想偷个懒直接使用 Mint-ui
组件库里现成的tabbar和tab-item组件,github上看了下它的实现源码发现只实现了切换功能但不能滑动,so,懒偷不了就只好自己写咯。

首先我们不能设置自动播放ok了
第二我们需要能够捕获到滚动到哪一页的索引,这个值需要用来设置下面的当前tab
第三我们需要通过外部js去设置slider的当前页面,譬如我们点击第二个tab,我们需要把显示的index
设置为1官方文档目前并没有给出这块的解释

其实单单实现tab切换功能是不难的,看mint-ui使用的其实是v-model语法糖,就像下面这样

那么下面我们通过源码挖掘,我们知道slider其实可以有一个属性 :index
这个就是当前的索引了,那么我们需要设置这个索引,只要去改变这个对应得index
的值就可以了

下面是拆解v-model语法糖的实现

那么这里就上代码了(文中所有的图片是去assets
文件夹取得图片,并非本地图片,所以需要自己放一些图片到assets目录)

然后只需要在tab-item组件内实现当自己被点击时,让其父组件也就是ly-tab组件
$emit 一个 input
事件,并传入一个标识每个tab-item的唯一值作为第一个参数,关于这个唯一值,mint-ui的做法需要用户自己手动给每个tab-item通过props传入一个唯一的id值,如下为Mint
UI的Demo实现:

     这是第{{page+1}}页       首页{{pathchanged}}    分类    我的    .image { width: 750px; height: 700px; } .slider { width: 750px; height: 700px; border-width: 2px; border-style: solid; border-color: #41B883; } .frame { width: 750px; height: 700px; position: relative; } .logo { position: relative; width: 45px; height: 45px; } .nav { position: absolute; width: 750px; bottom: 0px; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .link { width: 162.5px; flex-shrink: 1; text-align: center; margin:0 auto; padding: 3px; align-items: center; } .title { font-size: 25px; line-height: 35px; text-align: center; top: 5px; } .contenttext { font-size: 32px; line-height: 35px; text-align: center; top: 25px; color: 38px; color: red; }  export default { data () { return { page:0, imageList: [ { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'}, { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}, { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'} ], src1: "../../../assets/home_btn_home_s.png", src2: "../../../assets/home_btn_rent.png", src3: "../../../assets/cut.png" } }, methods:{ onchange{ this.page=evtValue.index }, changepage{ this.page=page } }, computed: { totalheight(){ const height = 750/weex.config.env.deviceWidth*weex.config.env.deviceHeight return height-180 }, pathchanged(){ var self = this if{ self.src1 = "../../../assets/home_btn_home_s.png" self.src2 = "../../../assets/home_btn_rent.png" self.src3 = "../../../assets/cut.png" }else if{ self.src1 = "../../../assets/home_btn_home.png" self.src2 = "../../../assets/home_btn_rent_s.png" self.src3 = "../../../assets/cut.png" }else if{ self.src1 = "../../../assets/home_btn_home.png" self.src2 = "../../../assets/home_btn_rent.png" self.src3 = "../../../assets/cut_on.png" } return '' } } }
   订单  

因为常常会遇到有同学问这块的东西,所以就索性写一个,给大家参考使用。

但是,在看过大佬的 vue当中设计Tabbar插件时的思考
后觉得文章中的那种做法会更好一点,因为对于父组件
来说,只要知道点击的是哪个`就行了啊,那么我把每个 `组件的 index
索引值作为它的唯一标识值不就行了吗。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

那么问题来了:怎么在tab-item组件内部取到自己的 index 值呢?

首先ly-tab组件的 $children是一个数组,由于每个
组件是依次创建并通过push的方式插入该数组,所以在每个 组件创建并push到
$children 时,对于 组件来说
(this.$parent.$children.length || 1) - 1不就是每个组件唯一的
index
值了啊。实际上,到这里点击切换的功能就已经可以实现了。下面贴上tab-item.vue中的代码:

tab-item.vue

    export default { name: 'LyTabItem', computed: { activeStyle () { return { color: this.$parent.activeColor, borderColor: this.$parent.activeColor, borderWidth: this.$parent.lineWidth, borderBottomStyle: 'solid' } } }, data () { return { id: (this.$parent.$children.length || 1) - 1 } }}.ly-tab-item { text-decoration: none; text-align: center; .ly-tab-item-icon { margin: 0 auto 5px; } .ly-tab-item-label { margin: 0 auto 10px; line-height: 18px; }}

关于tab.vue中触摸滑动、惯性滑动以及回弹等效果实现在这里就没办法详细讲了,有兴趣的小伙伴可以到github上查看,
点我去github查看项目
,如果想看示例demo可以clone项目到本地跑一跑,写得不好的地方欢迎大家指正,如果觉得用得着或者能够帮到大家的话最好了,那也不妨点个star吧,哈哈……

哎哎哎,不对不对,怎么就开始求star了,最重要的还没讲呢——
ly-tab怎么使用呢?

如何使用 ly-tab

小伙伴们如果想使用ly-tab,需要在你的项目中通过npm或者yarn下载安装:

npm install ly-tab -Soryarn add ly-tab

接着在main.js中全局引入:

import Vue from 'vue';import LyTab from 'ly-tab';Vue.use;

之后你就可以在你项目中任意使用 `和 `组件而不需要再次引入了

栗子

   {{item.itemName}} 

上面的栗子其实只是tabbar的实现,大家项目中肯定还需要做视图区的切换,在这里简单说一下我目前的做法:

使用Vue-router做router-view的切换 使用动态组件

我暂时的话好像只用过这两种,不知道大家还有其他什么更好的方法,欢迎分享~

配置项

可以给 组件传入一些配置项以自定义你想要的效果

配置项

类型

描述

默认值

lineWidth Number fixBottom为false时tabbar底部border-width 1px
activeColor String 激活状态下字体color以及border-bottom-color red
fixBottom Boolean 是否固定在视图底部 false additionalX Number
近似等于超出边界时最大可拖动距离 50px reBoundExponent Number
惯性回弹指数 10 sensitivity Number
惯性滑动时的灵敏度,可近似认为手松开后速度减为零所需时间 1000ms
reBoundingDuration Number 回弹动画duration 360ms

以上所述是小编给大家介绍的写一个移动端惯性滑动&回弹Vue导航栏组件
ly-tab,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

发表评论

电子邮件地址不会被公开。 必填项已用*标注