组件 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="changeItem({{index}})">{{item}}</view> </repeat> </scroll-view> </view> |
css代码:
.item-wrap{ display: flex; border-bottom: 1px solid #ccc; white-space: nowrap}.title{ width: 160rpx; line-height: 40px}.scroller{ flex: 1; line-height: 42px}.item{ display: inline-block; padding: 0 30rpx;}.active{ background-color: #eee; color: orange} |
