使用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} |
给个代码片段
新建的代码片段样式啥都都不加载了enmmm
肯定样式不对。然后，你这是用了什么框架啊，语法跟我的有点不一样啊。
就是wepy框架啊
emmm~~感觉就是你的样式有点问题是吧。
看看我的，哪有啥问题
https://developers.weixin.qq.com/s/St5AoxmU7Q5E
大哥看看我这个 https://developers.weixin.qq.com/s/jL7zjxmv7Q5f
第一次弄这个代码片段样式没弄好，，，打开之后再哪个app.wxss里粘贴这个
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
page {
height: 100%;
}
.item-wrap{
display: flex;
line-height: 100rpx;
height: 100rpx;
border-bottom: 1px solid #ccc;
text-align: center;
white-space: nowrap;
width:100%;
}
.title{
flex: 1;
height: 100rpx;
}
.scroller{
flex: 5;
}
.item{
display: inline-block;
padding: 0 20rpx;
box-sizing: border-box;
line-height: 80rpx;
border-radius: 50rpx;
margin: 10rpx 10rpx
}
.active{
background-color: #eee;
color: orange
}
https://developers.weixin.qq.com/s/ufXA7zmh7G5V