小程序使swiper标签自适应内容

小程序使swiper标签自适应内容

html：

<view class="homepage">
    <view class="head">
        <view class="{{current == 0 ? 'head-left':'head-right'}}" bindtap="switchNav" id="0">所有成员</view>
        <view class="{{current == 1 ?'head-left':'head-right'}}" bindtap="switchNav" id="1">申请列表<view class="headR-num">2</view></view>
    </view>
    <view style="flex:1;">**//主要是flex让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：**
        <swiper class="swiper" current="{{current}}" bindchange="_changeCurrent" >
            <swiper-item style="overflow-y: auto;">
                <view class="swiperV">
                    <view class="staff"  >
                    <view class="staff-left">
                        <image src="" />
                        <view class="staffName">张三</view>
                        <view class="Notjoin">待加入</view>
                    </view>
                    <view class="rightLog"></view>
                    </view>
                    <view class="staff" >
                        <view class="staff-left">
                            <image src="" />
                            <view class="staffName">张三</view>
                            <view class="Notjoin">待加入</view>
                        </view>
                        <view class="rightLog"></view>
                    </view>
                    <view class="staff" >
                        <view class="staff-left">
                            <image src="" />
                            <view class="staffName">张三</view>
                            <view class="Notjoin">待加入</view>
                        </view>
                        <view class="rightLog"></view>
                    </view>
                    <view class="staff" >
                        <view class="staff-left">
                            <image src="" />
                            <view class="staffName">张三</view>
                            <view class="Notjoin">待加入</view>
                        </view>
                        <view class="rightLog"></view>
                    </view>
                </view>
            </swiper-item>
           <swiper-item style="overflow-y: auto;">
                <view class="remin">
                    <view class="remin-left">
                        <image src="" />
                        <view class="reminL-name">张三</view>
                        <view class="reminL-position">销售</view>
                    </view>
                    <view class="remin-right">同意</view>
                </view>
                <view class="line"><view ></view></view>
            </swiper-item>
        </swiper>
    </view>
    
</view>

css

.homepage{
    /* width: 100%; */
    width: 100%;
    height: 100%;
    display: flex;
    position: fixed;
    flex-direction: column;
    
}
.swiper{
    width: 100%;
    height: 100%;
}
.swiper swiper-item{
    width: 100%;
    height: 100%;
}

效果图：

这样就可以使swiper随着内容自适应。之前百度没有理想中的方案，希望这个可以帮到你们。