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