使用cube-ui封装的一个简单的导航滚动栏

2019-10-12 admin

使用到了cube-UI , 组件全部代码 使用过程中用到了 动态模板的功能,还有用到了findIndex() ,所以IE方面应该不支持,因为IE不支持findIndex()

<template>

<div class="tab5">
  <cube-tab-bar
    v-model="selectedLabel"
    :showSlider=true
    :useTransition=false
    :data="tabs"
    ref="tabbar"
    @change="changeHandler">
  </cube-tab-bar>
  <div class="slide-wrapper">
    <cube-slide
      :loop=true
      :auto-play=false
      :show-dots=false
      :initial-index="index"
      :options="aaa"
      ref="slide"
      @change="onChange"
      @scroll="onScroll"
    >
      <cube-slide-item v-for="(tab,index) of tabs" :key="index">
        <component :is="tab.component" :data="tab.data"> </component>
      </cube-slide-item>
    </cube-slide>
  </div>
</div>

</template>

<script>

export default { name: ‘tab’, data () {

return {
  aaa: {
    probeType: 3,
    listenScroll: true,
    directionLockThreshold: 0
  },
  index: this.defaultIndex
}

}, props: {

tabs: {
  type: Array,
  default () {
    return {}
  }
},
// 默认的显示第几个,
defaultIndex: {
  type: Number,
  default: 0
}

}, mounted () { }, computed: {

// 当前选择的数据
selectedLabel: {
  get () {
    return this.tabs[this.index].label
  },
  set (newValue) {
    this.index = this.tabs.findIndex((value) => {
      return value.label === newValue
    })
  }
}

}, methods: {

changeHandler () {
},
onChange (current) {
  console.log(current, '11111111')
  this.index = current
},
onScroll (pox) {
  console.log(pox.x)
  const tabwidth = this.$refs.tabbar.$el.clientWidth
  const silderWidth = this.$refs.slide.slide.scrollerWidth
  const transform = -pox.x / silderWidth * tabwidth
  this.$refs.tabbar.setSliderTransform(transform)
}

} } </script>

<style scoped lang=“stylus” rel=“stylesheet/stylus”> .slide-wrapper{

overflow hidden
flex 1

} </style>

调用组件 image.png 定义的数据,组件中需要啥数据就往data里面传,然后 image.png

[转载]原文链接:https://segmentfault.com/a/1190000020667238

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77245.html

文章标题:使用cube-ui封装的一个简单的导航滚动栏

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
回到顶部