wx:for 和 wxss 中的width设置?
发布于 6 年前 作者 yanyuan 15163 次浏览 来自 官方Issues

你好，在做一个Menubar的时候 我在wxml文件里有以下list:

  <view class="menu-bar">

    <view class="menu-bar-item" wx:for="{{homePageMenuBarImgUrls}}" wx:for-item="item"> 

        <image mode="{{item.mode}}" src="{{item.src}}" style="width:100rpx; height:100rpx"></image>

        <view class="menu-bar-item-fontsize">{{item.text}}</view>

    </view>

  </view>

homePageMenuBarImgUrls，是一个在js文件里的object list。 当我在wxss文件中对于 class=“menu-bar-item” 进行 渲染时，相对的width好像没有效果（25%比如），必须要用fix的width，如100rpx才能改变每个item的宽度。

.menu-bar-item{

  width: 200rpx;

  /* width: 25%; */

  display: flex;

  flex-direction: column;

  align-items: center;

}

是我哪里没做好吗？还是不支持？还是bug？

1 回复

现在的width=25%,有效

另外，flex应该写在外部view内

.menu-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menu-bar-item{
  width: 25%;
}

不过不清楚你的设计稿，应该是想横向排列吧

flex-direction: row;
回到顶部