Drupal8+微信小程序：14,顶部tabs的实现

作者：老葛 亚艾元软件

底部tab实现了以后，我们来看一下，顶部的tabs的实现，这是我实现后的效果：

 

图8-2-14-1

  

图8-2-14-2

 

   我们先以动态部分的顶部tab为例。首先在news.wxml里面，添加四个导航navigator链接。

<view>

    <view>

<view>

          <navigator url="/pages/news/news" open-type="reLaunch" class="tab-list {{type=='all' ? 'active' : ''}}" hover-class="navigator-hover">全部</navigator>

  <navigator url="/pages/news/news?type=1" open-type="reLaunch" class="tab-list {{type=='1' ? 'active' : ''}}" hover-class="navigator-hover">动态</navigator>

  <navigator url="/pages/news/news?type=2" open-type="reLaunch" class="tab-list {{type=='2' ? 'active' : ''}}" hover-class="navigator-hover">赛事</navigator>

  <navigator url="/pages/news/news?type=3" open-type="reLaunch" class="tab-list {{type=='3' ? 'active' : ''}}" hover-class="navigator-hover">典故</navigator>

</view>

        

    </view>

    <view>

        <view class="weui-cells weui-cells_after-title">

    <view wx:for="{{items}}" wx:key="*this" class="weui-cell weui-cell_access" hover-class="weui-cell_active">

            <navigator url="/pages/news/newsitem?nid={{item.nid}}" >

                <view>{{item.title}}</view>

            </navigator>

</view>

        </view>

    </view>

</view>

在news.js，做以下修改：

onLoad: function (options) {

    //console.log('onLoad')

    var that = this;

var type = options.type || "";

var title = "";

if(type == 1){

title = '象棋动态';

}

if(type == 2){

title = '象棋赛事';

}

if(type == 3){

title = '象棋典故';

}

if(type == ""){

type = 'all';

title = '象棋动态';

}

    that.setData({

        title: title,

type:type

    })

that.getArticles();

就是设置了全部显示的情况。新闻动态这里面，上面的4个tab，对应的微信小程序页面，都是这个"pages/news/news"，只不过传递的参数不一样。

对于我们增加的navigator，有两部需要注意：

open-type="reLaunch" class="tab-list {{type=='2' ? 'active' : ''}}"

打开类型，我们选择了reLaunch，表示重新加载。对于class，我们使用三位运算符，根据参数type的不同，选择输出active。

调整样，在news.wxss里面增加以下代码：

.btn-area navigator{

  width:24.9%;

  float:left;

}

.btn-area{

  height:30px;

  clear:both;

}

.btn-area navigator.navigator-hover,

.btn-area navigator.active{

  border-bottom: 2px solid blue;

}

   这样做出来的效果，就如同我们前面看到的那样：

 

图8-2-14-3

 

   棋谱部分，顶部的四个tab的实现，和这里类似，只不过，四个tab对应四个不同的页面。我们以里面的布局tab为例：

 

图8-2-14-4

 

首先在对应页面的模板opening.wxml中，增加导航链接：

<view>

    <view>

    <view>

<view>

          <navigator url="/pages/qipus/qipus" open-type="reLaunch" hover-class="navigator-hover">最新</navigator>

 <navigator url="/pages/opening/opening" class="tab-list active" hover-class="navigator-hover">布局</navigator>

 <navigator url="/pages/events/events" hover-class="navigator-hover">赛事</navigator>

 <navigator url="/pages/players/players" hover-class="navigator-hover">棋手</navigator>

</view>

</view>

    </view>

<view>

...

然后调整对应的样式opening.wxss：

.btn-area navigator{

  width:24.9%;

  float:left;

}

.btn-area{

  height:30px;

  clear:both;

}

.btn-area navigator.navigator-hover,

.btn-area navigator.active{

  border-bottom: 2px solid blue;

}

   依次对其它3个页面的模板文件做同样的操作。由于我们分别在4个模板文件中添加导航链接，每个模板中navigator，哪个是active的，我们可以单独设置，我们将当前页面所在的navigator设置为active即可。对应的样式代码，也是一样，我们拷贝到对应页面的样式文件中即可。

这里面，我们只讲qipus页面的navigator的打开类型设置为了reLaunch，一般情况下，这是没事的，不过上线以后，发现了一个小问题，这样我我对小程序里面的页面管理，有了更深一步的认识。