bug如下
<view class="wrapper">
<!-- tab导航栏 -->
<scroll-view class="tab" scroll-x="true">
<view wx:for="{{menuList}}" wx:key="index" class="tab-item {{currentTab == index ? 'active' : ''}}"
data-current="{{index}}" data-catid="{{item.catid}}" bindtap='clickMenu'>{{item.catname}}</view>
</scroll-view>
<view class='tab_btn' bindtap='showShopType'>
<view class='tab_btn_ico'>
<image mode='scallToFill' lazy-load='true' src='/imgs/tab_bt.png'></image>
</view>
</view>
</view>
.wrapper {
border: 1px solid red;
display: flex;
width: 100%;
box-sizing: border-box;
}
子组件的wrapper为100%时显示出来的效果却不是占满父元素的同宽，而是产生了间距
问题原因
子组件默认自带一个隐藏的page页面，这个隐藏的Page页面自带默认的最大宽，实际上100%是以这个默认的page的最大宽为基准
解决方法
获取父元素的模板层所输出的dom元素的真实宽rpx，将子组件的外层容器wrapper的width100%改为width:xxrpx;
.wrapper {
border: 1px solid red;
display: flex;
width: 750rpx;
box-sizing: border-box;
}
<view class="wrapper">
<!-- tab导航栏 -->
<scroll-view class="tab" scroll-x="true">
<view wx:for="{{menuList}}" wx:key="index" class="tab-item {{currentTab == index ? 'active' : ''}}"
data-current="{{index}}" data-catid="{{item.catid}}" bindtap='clickMenu'>{{item.catname}}</view>
</scroll-view>
<view class='tab_btn' bindtap='showShopType'>
<view class='tab_btn_ico'>
<image mode='scallToFill' lazy-load='true' src='/imgs/tab_bt.png'></image>
</view>
</view>
</view>
<view class="main">
<!--tab导航-->
<com-head-navigation-scrollView></com-head-navigation-scrollView>
<com-shop-type title="商品类别" shops='{{menuList}}' bind:shopTypeHide='shopTypeCloseClick'
bind:shopTypeClick='shopTypeClick' class="{{showShopType == false ? 'hideShopType' : ''}}"></com-shop-type>
<!-- tab导航页面 -->
<swiper class="content" style='height:{{tabContentHeight}}' duration="1000" current="{{currentTab}}"
bindchange="changeContent">
<swiper-item class="content-item" wx:for="{{menuList}}" wx:key="index">
<com-choiceining id="indexPage{{index}}" catId="{{item.catid}}" modelNames="{{item.node_order_info}}">
</com-choiceining>
</swiper-item>
</swiper>
</view>
本例中，由于main父组件的主容器Main容器的宽为750rpx,所以子组件的外层容器设为750rpx