vue 组件水平滚动_可横向滑动的vue tab组件

本文介绍了如何在Vue项目中创建一个可水平滚动的tab组件——ly-tab,该组件适用于移动端并支持触摸滑动和回弹效果。使用步骤包括引入组件、定义数据源和事件处理。示例代码展示了如何在页面上调用组件,监听选中项变化,并处理数据更新。
摘要由CSDN通过智能技术生成

##示例

前端使用技术:框架->vue 组件>ly-tab一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件 ly-tab 介绍地址 ly-tab npm地址 ##使用步骤 1,引入包,定义成公共组件

代码

import LyTab from '../packages/tab'

Vue.use(LyTab)

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

代码

//调用

v-model="selectedId"

:items="policyListArr"

:options="options"

@change="handleChange" >

//数据源

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)

},

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值