可横向滑动的vue tab组件
示例
前端使用技术:框架->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组件的更多相关文章
- 基于vue与vux做的可滑动tab组件(附源码)
背景 前不久,刚完成了一个商品列表+购物车功能的页面,因为一级商品分类在顶部tab中显示,可滑动,间距可定制,如下图所示: 定制的tab需求如下: 1. 每个tab-item的间距是相同的,可定制 2 ...
- Vue可自定义tab组件
在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的tab组件将会极大地节约你的开发时间. 如何 ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- vue统计组件库和ui框架
UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...
- ReactNative学习-滑动查看图片第三方组件react-native-swiper
滑动查看图片第三方组件:react-native-swiper,现在的版本为:1.4.3,该版本还不支持Android. 下面介绍的是该组件的一些用法,可能总结的不完整,希望大家一起来共同完善. 官方 ...
- ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题
ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题 如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...
- android--解--它们的定义tabhost(动态添加的选项+用自己的主动性横向滑动标签+手势切换标签页和内容特征)
在本文中,解决他们自己的定义tabhost实现,并通过代码集成动态加入标签功能.自己主动标签横向滑动功能.和手势标签按功能之间切换. 我完成了这个完美的解决方案一起以下: 1.定义tabwidget布 ...
- 关于elementUi tab组件路由跳转卡死问题
好久没来了,周五项目终于要上线了(*^▽^*),上线之前测出一个很恶心的bug真真是... 项目:Vue + elementUi 后台管理项目 问题描述:登录后首次通过侧边栏路由跳转到主页面有ta ...
- JGUI源码:Tab组件实现(9)
程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui- ...
随机推荐
- LInux下实时网络流量监控工具nload教程
https://jingyan.baidu.com/article/642c9d340cbef0644a46f72a.html http://blog.csdn.net/u014171641/arti ...
- [WordPress]基本操作
编辑文本 文本模式下 more 提取摘要<!--more-->
- TCP/IP解析(一):TCP/IP的工作方式
本文包括下面内容: 1.TCP/IP协议系统 2.OSI模型 3.数据包 4.TCP/IP的交互方式 1.TCP/IP模型的协议层 分为四层: 网络訪问层:提供与物理网络连接的接口.依据硬件的物理地址 ...
- Codeforces Round #256 (Div. 2) B
B. Suffix Structures Bizon the Champion isn't just a bison. He also is a favorite of the "Bizon ...
- TI C66x DSP 系统events及其应用 - 5.6(INTMUX)
系统event 0~127(包含了eventCombiner的输出event 0~3)与CPU支持的12个可屏蔽中断是通过INTMUX寄存器进行映射的(不包含NMI.RESET).能够选择将系统eve ...
- poj1753,Flip Game,ArrayDeque<Node>
Flip Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 30449 Accepted: 13232 Descr ...
- 修改linux内核的启动logo和禁用启动光标【转】
本文转载自:http://blog.csdn.net/hunanchenxingyu/article/details/40992947 1-1.制作logo的方法: 首先选择一个自己喜欢的图片,png ...
- Bone Collector(hdoj--2602--01背包)
Bone Collector Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- ajax跨域POST时执行OPTIONS请求服务端返回403forbidden的解决方法
ajax访问服务端restful api时,由于contentType类型的原因,浏览器会先发送OPTIONS请求. 本人服务端用的是spring mvc框架,web服务器用的是tomcat的,以下给 ...
- mvc:view-controller直接转发页面
在springMVC中,通过@RequestMapping发送请求地址,转发到目标页面,但是,有时候想直接访问页面, 不想通过xxx.jsp直接访问页面,可以通过springmvc.xml配置文件中的 ...