收藏
回答

小程序 vtabs组件滑动跳转混乱?

使用官方提供的vtabs 示例中的代码,开发垂直滑动选项卡。

右侧内容项中的高度是根据内容的大小随机设定的,然后就会出现选项卡切换混乱的问题,当给右侧内容项设定固定高度时,又没有问题。

请问存在什么bug呢?

回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-Riven
    社区技术运营专员-Riven
    2020-10-14

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-10-14
    有用
    回复 17
    查看更多(12)
  • sook
    sook
    2020-12-30

    微信小程序,滑动选项卡案例

    <view class="tabbox">
    <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
      <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">推荐<view></view></view>
      <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">电视剧<view></view></view>
      <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">电影<view></view></view>
      <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">综艺<view></view></view>
      <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">动漫<view></view></view>
    </scroll-view>
    <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">
      <swiper-item>
    	<scroll-view scroll-y="true" class="scoll-h">
    		<view class="item-ans">
    		<!-- 首页2 -->
    			1
    		<!-- 首页2 -->
    		</view>
    	</scroll-view>
      </swiper-item>
      <swiper-item>
    	<scroll-view scroll-y="true" class="scoll-h">
    		<view class="item-ans">
    		  <!-- 首页2 -->
    				2
    		  <!-- 首页2 -->
    		</view>
    	</scroll-view>
      </swiper-item>
      <swiper-item>
    	<scroll-view scroll-y="true" class="scoll-h">
    		<view class="item-ans">
    		  <!-- 首页3 -->
    					3
    		  <!-- 首页3 -->
    		</view>
    	</scroll-view>
      </swiper-item>
      <swiper-item>
    	<scroll-view scroll-y="true" class="scoll-h">
    		<view class="item-ans">
    		  <!-- 首页4 -->
    			4
    		  <!-- 首页4 -->
    		</view>
    	</scroll-view>
      </swiper-item>
      <swiper-item>
    	<scroll-view scroll-y="true" class="scoll-h">
    		<view class="item-ans">
    		<!-- 首页5 -->
    		  5
    		<!-- 首页5 -->
    		</view>
    	</scroll-view>
      </swiper-item>
    </swiper>
    </view>
    

    地址:https://www.yujianni.top/news/comp_artinfo.html?id=532

    2020-12-30
    有用
    回复
  • 草莽英雄
    草莽英雄
    2020-10-14

    wxml:

    <mp-vtabs

    vtabs="{{vtabs}}"

    activeTab="{{activeTab}}"

    bindtabclick="onTabCLick"

    bindchange="onChange"

    class="test"

    >

    <block wx:for="{{vtabs}}" wx:key="index" wx:for-item="item" >

    <mp-vtabs-content tabIndex="{{index}}">

    <view class="vtabs-content-item" >

    <mp-cells title="{{item.title}}">

    <view wx:for="{{cells[index]}}" wx:key="title" wx:for-item="newitem">

    <mp-cell link url="../article/article?id={{newitem.id}}" hover value="{{newitem.title}}">

    </mp-cell>

    </view>

    </mp-cells>

    </view>

    </mp-vtabs-content>

    </block>

    </mp-vtabs>

    其余的跟官方提供的组件示例一致,https://developers.weixin.qq.com/s/SG4tK2mD77f7

    由于我的内容是从数据库取出来的,每一项内容数量不一致,wxss中设置:.vtabs-content-item{height=auto;}

    而官方组件中设定的是固定高度。

    请问这个问题怎么处理?



    2020-10-14
    有用
    回复 6
    • 觀·自在
      觀·自在
      2020-10-30
      问题解决了,添加 min-height: 100vh; 一切ok
      2020-10-30
      回复
    • 杨 洲
      杨 洲
      2020-11-05回复觀·自在
      你这样每一项的高度必须得一屏了
      2020-11-05
      回复
    • 觀·自在
      觀·自在
      2020-11-12回复杨 洲
      就是这个min-height起了作用,至少好用点了。
      2020-11-12
      回复
    • 草莽英雄
      草莽英雄
      2020-11-15回复觀·自在
      你也是遇到了这个问题吗? 有没有更好的解决方法?
      2020-11-15
      回复
    • 觀·自在
      觀·自在
      2020-11-16
      那就只能自己写一个了
      2020-11-16
      回复
    查看更多(1)
登录 后发表内容
问题标签