position:flexd/absolute;与display:flex;不能在同一标签元素下使用。因为固定定位或绝对定位会使得弹性布局失效。
解决方法:在弹性布局display:flex;外包裹一层view。如下:
index.wxml
<!-- 包裹层 --> <view class="flex"> <!-- 弹性布局层 --> <view class="bg"> <view class="nav"> <scroll-view scroll-x="true" enable-flex="true"> <view class="scroll-view_H"> <view><view class="{{flag==0?'select':'normal'}}" id="0" bindtap="switchNav">专享</view></view> <view><view class="{{flag==1?'select':'normal'}}" id="1" bindtap="switchNav">视频</view></view> <view><view class="{{flag==2?'select':'normal'}}" id="2" bindtap="switchNav">糗闻</view></view> <view><view class="{{flag==3?'select':'normal'}}" id="3" bindtap="switchNav">纯文</view></view> <view><view class="{{flag==4?'select':'normal'}}" id="4" bindtap="switchNav">纯图</view></view> <view><view class="{{flag==5?'select':'normal'}}" id="5" bindtap="switchNav">精华</view></view> <view><view class="{{flag==6?'select':'normal'}}" id="6" bindtap="switchNav">趣闻</view></view> </view> </scroll-view> </view> <view class="opr">审</view> <view class="add">+</view> </view> </view>
index.wxss
/**index.wxss**/ .flex{ width: 100%; position: fixed; top: 0; left: 0; z-index: 999; #这里也很关键,z-index设置的值越大,则显示在最上层。 } .bg{ display: flex; flex-direction: row; width: 100%; height: 50px; background-color: #FFBA1E; color: #fff; align-items: center; } .nav{ width: 70%; height: 40px; } .scroll-view_H{ display: flex; flex-direction: row; margin-left: 10px; height: 40px; } .opr{ width: 20px; height: 20px; border-radius: 50%; font-size: 13px; text-align: center; color: #FFBA1E; background-color: #fff; font-weight: bold; margin-left: 10px; } .add{ width: 20%; height: 50px; line-height: 50px; text-align: right; margin-right: 10px; font-size: 50px; } .normal{ font-size: 14px; width: 40px; height: 40px; line-height: 40px; padding-left: 10px; padding-right: 10px; } .select{ width: 40px; height: 40px; line-height: 40px; font-size: 14px; font-weight: bold; padding-left: 20px; padding-right: 20px; }