You are here

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

作者:老葛 亚艾元软件

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

8-2-14-1.png 

8-2-14-1

8-2-14-2.png  

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();

就是设置了全部显示的情况。新闻动态这里面,上面的4tab,对应的微信小程序页面,都是这个"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.png 

8-2-14-3

 

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

8-2-14-4.png 

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,一般情况下,这是没事的,不过上线以后,发现了一个小问题,这样我我对小程序里面的页面管理,有了更深一步的认识。

 


Drupal版本: