示例



前端使用技术:框架->vue

组件>ly-tab一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件

ly-tab 介绍地址

ly-tab npm地址

使用步骤

1,引入包,定义成公共组件



代码

import LyTab from '../packages/tab'
Vue.use(LyTab)

2,页面调用,定义数据源,写事件





代码

//调用
<ly-tab
v-model="selectedId"
:items="policyListArr"
:options="options"
@change="handleChange" >
</ly-tab>
//数据源
data(){
return{
selectedId:1,
options: {
activeColor: '#4e95f7'
},
backgroundstyle:'rgba(255, 255, 255, 0)',
colorstyle:'rgba(255,255,255, 1)',
policyListArr: [
{
label: '全部',
categoryId: -1,
lastId: 0,
list: [],
},
], // 列表数据
}
} //事件
handleChange (itemObj,i) {
this.selectedId=i
const item = this.policyListArr[i]
item.list = []
item.lastId = 0
this.active = i
this.isLoadedAll = false
this.isLoadingNo = false
this.isLoadingMore = false
this.scroller.openPullUp()
this.searchList(i)
},

具体还想改什么根据自己的业务改

可横向滑动的vue tab组件的更多相关文章

  1. 基于vue与vux做的可滑动tab组件(附源码)

    背景 前不久,刚完成了一个商品列表+购物车功能的页面,因为一级商品分类在顶部tab中显示,可滑动,间距可定制,如下图所示: 定制的tab需求如下: 1. 每个tab-item的间距是相同的,可定制 2 ...

  2. Vue可自定义tab组件

    在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的tab组件将会极大地节约你的开发时间.     如何 ...

  3. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  4. vue统计组件库和ui框架

    UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...

  5. ReactNative学习-滑动查看图片第三方组件react-native-swiper

    滑动查看图片第三方组件:react-native-swiper,现在的版本为:1.4.3,该版本还不支持Android. 下面介绍的是该组件的一些用法,可能总结的不完整,希望大家一起来共同完善. 官方 ...

  6. ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题

    ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题     如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...

  7. android--解--它们的定义tabhost(动态添加的选项+用自己的主动性横向滑动标签+手势切换标签页和内容特征)

    在本文中,解决他们自己的定义tabhost实现,并通过代码集成动态加入标签功能.自己主动标签横向滑动功能.和手势标签按功能之间切换. 我完成了这个完美的解决方案一起以下: 1.定义tabwidget布 ...

  8. 关于elementUi tab组件路由跳转卡死问题

    好久没来了,周五项目终于要上线了(*^▽^*),上线之前测出一个很恶心的bug真真是... 项目:Vue + elementUi   后台管理项目 问题描述:登录后首次通过侧边栏路由跳转到主页面有ta ...

  9. JGUI源码:Tab组件实现(9)

    程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui- ...

随机推荐

  1. ZOJ 3362 Beer Problem

    Beer Problem Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on ZJU. Original I ...

  2. ACDream - Graphs

    先上题目: Graphs Time Limit: 4000/2000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Submit ...

  3. 转载 - 跳跃的舞者,舞蹈链(Dancing Links)算法——求解精确覆盖问题

    出处:http://www.cnblogs.com/grenet/p/3145800.html 精确覆盖问题的定义:给定一个由0-1组成的矩阵,是否能找到一个行的集合,使得集合中每一列都恰好包含一个1 ...

  4. C# ArcgisEngine开发中,对一个图层进行过滤,只显示符合条件的要素

    转自原文 C# ArcgisEngine开发中,对一个图层进行过滤,只显示符合条件的要素 有时候,我们要对图层上的地物进行有选择性的显示,以此来满足实际的功能要求. 按下面介绍的方法可轻松实现图层属性 ...

  5. 【转】三年后再反思我的" Java Web项目管理得失谈"

    原文: http://blog.csdn.net/csfreebird/article/details/7561189 这篇文章介绍的经验心得不错,故转载之. 三年前,我写了 JavaWeb项目管理得 ...

  6. 很实用的50个CSS代码片段

    原文:50 Useful CSS Snippets Every Designer Should Have          面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...

  7. Python 远程调用MetaSploit

    (1)安装Python的msgpack类库.MSF官方文档中的数据序列化标准就是參照msgpack. root@kali:~# apt-get install python-setuptools ro ...

  8. c24--预编译,宏定义(带参数,不带参数)

    // // main.c // 宏定义 #include <stdio.h> void test(); /* 预处理指令:在我们的文件翻译成0和1之前做的操作我们称之为预处理指令,一般以# ...

  9. h5-9 canvas

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Html+CSS基础之Html

    注:本文摘自慕课网http://www.imooc.com   HTML+CSS基础课程 本人有道笔记:http://note.youdao.com/noteshare?id=18fa811e9f9e ...