微信小程序头部导航经常会用到选项卡,一个会自动居中的选项卡的体验会比普通的选项卡要好很多。
效果示意图:
被选中的tab会始终居中显示。
利用微信小程序自带的组件scroll-view的scroll-left就很容易实现这个效果。
wxml代码:
<!-- 遮罩层 -->
<image wx:if="{
{showMaskScroll}}" class='mask-scroll' src='../../static/images/slidemunu-r.png'></image>
<scroll-view scroll-x="true" class="nav {
{showScroll ? 'showScroll' : ''}} " scroll-left="{
{navScrollLeft}}" scroll-with-animation="{
{true}}" scroll-into-view="{
{toView}}" bindscrolltoupper