请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

亿仁网

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 384|回复: 0

顶部页签菜单切换效果设计

[复制链接]
  • TA的每日心情
    奋斗
    2019-3-14 22:24
  • 签到天数: 160 天

    [LV.7]常住居民III

    1074

    主题

    1139

    帖子

    1万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    18046
    发表于 2017-6-10 10:24:38 | 显示全部楼层 |阅读模式

    顶部页签菜单可以左右切换,但还没有实现页签菜单的切换效果,单击不同的页签,页签需要呈现为选中状态,同时页签对应的内容也跟着切换。

    1、在页签里设计两种样式:一种是select样式,选中时字体加粗;另一种是normal样式,字体不加粗。绑定单击事件switchNav。

    2、进入pages/index/index.js文件,定义两个变量:currentTab当前页签的索引值,flag变量用来控制样式选择,如果flag等于页签对应的id,则呈现为选中状态,使用select样式,具体代码如下:

    1. Page({
    2.   data:{
    3.     currentTab:0,
    4.     flag:0
    5.   }
    6. })
    复制代码

    3、添加页签菜单单击绑定事件switchNav,动态地给currentTab和flag变量赋值,具体代码如下:

    1. Page({
    2.   data:{
    3.     currentTab:0,
    4.     flag:0
    5.   },
    6.   switchNav:function(e){
    7.     console.log(e);
    8.     var page = this;
    9.     var id = e.target.id;
    10.     if(this.data.currentTab == id){
    11.        return false;
    12.     }else{
    13.       page.setData({currentTab:id});
    14.     }
    15.     page.setData({flag:id});
    16.   }
    17. })
    复制代码

    4、页签菜单进行切换时,对应的内容也跟着切换,需要使用swiper滑块视图容器组件,进入到pages/inde/index.wxml文件里,使用swiper进行页签内容的布局,具体代码如下:

    1. <swiper current="{{currentTab}}"style="height:1500px">
    2.   <swiper-item>
    3.       <include src="vip.wxml"/>
    4.   </swiper-item>
    5.   <swiper-item>
    6.       <include src="video.wxml"/>
    7.   </swiper-item>
    8.   <swiper-item>
    9.       我是文章内容
    10.   </swiper-item>
    11.   <swiper-item>
    12.       我是纯文内容
    13.   </swiper-item>
    14.   <swiper-item>
    15.       我是纯图内容
    16.   </swiper-item>
    17.   <swiper-item>
    18.       我是精华内容
    19.   </swiper-item>
    20.   <swiper-item>
    21.       我是穿越内容
    22.   </swiper-item>
    23. </swiper>
    复制代码

    这样单击页签菜单时,不仅菜单标题呈现为选中状态,同时页签内容也跟着变化,实现页签菜单和页签内容的联动效果。点击不同页签会呈现出选中效果及内容变化如图所示。

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    造物之前,必先造人。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|亿仁网 ( 粤ICP备16098737  

    GMT+8, 2021-3-8 11:55 , Processed in 0.069101 second(s), 27 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表