小程序
小游戏
企业微信
微信支付
扫描小程序码分享
试了一些方法，css有这两句: display: flex; white-space:nowrap; 子元素也加了高度。
调试 手机iPhone6s和开发者工具都没问题。
安卓手机小米4和华为note5 不能正常滑动
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
我也试过 网上的是display: flex; white-space:nowrap; 我把display: flex删了就能解决
解决了，标签 lable 换成 view。代码如下
wxml:代码
<scroll-view scroll-x="true" class="tab-goods" scroll-left="{{scrollLeft}}">
<view wx:for="{{result}}" wx:key="{{index}}" class="item overflow {{curInfo == index?'on':''}}" data-cur="{{index}}" bindtap="chooseGoods">{{!!item && !!item.goods_name? item.goods_name : '商品' + (index+1) }}</view>
</scroll-view>
wxss:样式
.tab-goods {
line-height: 90rpx;
height: 90rpx;
width: 100%;
white-space: nowrap;
border-bottom: 2rpx solid #ececec;
}
.tab-goods .item {
position: relative;
display: inline-block;
width: 80px;
color: #494949;
text-align: center;
font-size: 28rpx;
.tab-goods .item.on {
color: #22ac38;
.tab-goods .item.on:after {
content: '';
position: absolute;
left: 0;
bottom: -2rpx;
height: 6rpx;
background: #22ac38;
我也试过 网上的是display: flex; white-space:nowrap; 我把display: flex删了就能解决
解决了，标签 lable 换成 view。代码如下
wxml:代码
<scroll-view scroll-x="true" class="tab-goods" scroll-left="{{scrollLeft}}">
<view wx:for="{{result}}" wx:key="{{index}}" class="item overflow {{curInfo == index?'on':''}}" data-cur="{{index}}" bindtap="chooseGoods">{{!!item && !!item.goods_name? item.goods_name : '商品' + (index+1) }}</view>
</scroll-view>
wxss:样式
.tab-goods {
line-height: 90rpx;
height: 90rpx;
width: 100%;
white-space: nowrap;
border-bottom: 2rpx solid #ececec;
}
.tab-goods .item {
position: relative;
display: inline-block;
width: 80px;
color: #494949;
text-align: center;
font-size: 28rpx;
line-height: 90rpx;
height: 90rpx;
}
.tab-goods .item.on {
color: #22ac38;
}
.tab-goods .item.on:after {
content: '';
position: absolute;
width: 100%;
left: 0;
bottom: -2rpx;
height: 6rpx;
background: #22ac38;
}