不正确的效果是这样的:
页面wxml代码如下:
<scroll-view class="hot-box" scroll-y="true">
<view class="orderDetails" wx:for="{{order}}" wx:key=" ">
........省略部分代码......
........省略部分代码......
........省略部分代码......
<view class="productBtn">
<button class="more" hover-class="hover" bindtap="">删除订单</button>
<button class="more" wx:if="{{item.isPay===0}}" hover-class="hover" bindtap="">取消订单</button>
<button class="more" wx:if="{{item.isPay===0}}" hover-class="hover-pay" bindtap="">付款</button>
</view>
</view>
</scroll-view>
wxss代码如下:
.productBtn {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 25rpx;
margin-top: 30rpx;
justify-content: flex-end;
padding: 0;
height: 70rpx;
}
问题:无论怎么设置 justify-content都不起作用,三个按钮都是均匀分布。
解决方法,修改wxml代码,给每个button外边套一层view:
<scroll-view class="hot-box" scroll-y="true">
<view class="orderDetails" wx:for="{{order}}" wx:key=" ">
..........省略部分代码..........
..........省略部分代码..........
..........省略部分代码..........
<view class="productBtn">
<view>
<button class="more" hover-class="hover" bindtap="">删除订单</button>
</view>
<view>
<button class="more" wx:if="{{item.isPay===0}}" hover-class="hover" bindtap="">取消订单</button>
</view>
<view>
<button class="more" wx:if="{{item.isPay===0}}" hover-class="hover-pay" bindtap="">付款</button>
</view>
</view>
</view>
</scroll-view>
修改后效果如下: