您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记

微信小程序横向滚动纵向垂直居中的实现

发布时间：2018-03-20 16:03:53编辑：雪饮阅读（）

 使用scroll-view并结合scroll-x="true"就可以制作横向滚动的顶部导航了。

但是一般容易出现的问题就是横向滚动虽然实现了，但里面的文字一般都不是垂直居中的。

主要原因应该就是文字直接使用了text标签，这里文字建议最好使用view标签。

微信小程序横向滚动纵向垂直居中的实现

Wxcss

.nav{display:inline-block;font-size:16px;color: #2b2e33;padding-left:10px;padding-right:10px;line-height: 40px;}

.nav-hover{display:inline-table;color: #349393;font-size:16px;line-height: 40px;padding-left:10px;padding-right:10px;}

Wxml

<scroll-view class="scroll-view_H" scroll-x="true">

          <text style="{{initshow}}" class="nav" >初始化...</text>

          <view wx:for="{{section}}" wx:key="id" id="{{item.ID}}" catchtap="satelliteSelect" class="nav {{item.ID == currentId ? 'nav-hover' : ''}}">

            {{item.SATELLITENAME}}

          </view>

</scroll-view>