组件 scroll-view
使用scroll-view,滑动一行无法滑动,需要鼠标点击上一行的区域滑动,下一行才能滑动
比如说;要滑动 “特色”这一行,鼠标只能在“类型"这一行的范围里左右滑,”特色“这一行才能左右滑动
js代码:
<view class= "item-wrap" > <view class= "title" >{{title}}:</view> <scroll-view class= "scroller" scroll-x> <repeat for = "{{items}}" key= "{{index}}" > <view class= "{{current==index?'item active':'item'}}" [@tap](/user/tap)= "changeItem({{index}})" >{{item}}</view> </repeat> </scroll-view> </view> |
css代码:
.item-wrap{ display : flex; border-bottom : 1px solid #ccc ; white-space : nowrap } .title{ width : 160 rpx; line-height : 40px } .scroller{ flex: 1 ; line-height : 42px } .item{ display : inline- block ; padding : 0 30 rpx; } .active{ background-color : #eee ; color : orange } |