欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序开发页面顶部导航栏制作设计

    2018-05-14 09:52 来源/作者:懒人模板 分类:小程序教程  « »
    微信小程序商城电商整套系列相关推荐:
    1、微信小程序开发页面顶部导航栏制作设计 [图]
    2、
    微信小程序开发底部导航菜单栏的制作设计 [图]
    3、微信小程序开发广告轮播幻灯图制作设计 [图]
    4、微信小程序开发商城电商首页整体布局制作设计 [图]
    5、微信小程序开发分类页面栅格布局制作与设计 [图]
    6、微信小程序开发商品详情页中sku的弹出属性筛选选择框 [图]
    7、微信小程序商品正文详情页整体布局制作与设计 [图]
    8、微信小程序商城电商购物车页面制作与设计 [图]
    9、微信小程序商城电商个人会员中心页面制作设计 [图]

    微信小程序开发页面顶部导航栏制作设计效果图如下:

    1、导航栏样式文件:
    /* pages/home/home.wxss */
    page{  
      display: flex;  
      flex-direction: column;  
      height: 100%;  
    }  
    .navbar{  
      flex: none;  
      display: flex;  
      background: #fff;  
    }  
    .navbar .item{  
      position: relative;  
      flex: auto;  
      text-align: center;  
      line-height: 80rpx;  
      font-size:14px;
    }  
    /* 顶部导航字体颜色 */
    .navbar .item.active{  
      color: #f0145a;  
    }  
    /* 顶部指示条属性 */
    .navbar .item.active:after{  
      content: "";  
      display: block;  
      position: absolute;  
      bottom: 0;  
      left: 0;  
      right: 0;  
      height: 6rpx;  
      background: #f0145a;  
    } 
    2、导航栏测试数据js文件:
    // pages/home/home.js
    var app = getApp()
    Page({
      data: {
        navbar: ['护肤', '彩妆', '香水','个人护理'],
        currentTab: 0,
      },
    
      // 导航切换监听
      navbarTap: function (e) {
        console.debug(e);
        this.setData({
          currentTab: e.currentTarget.dataset.idx
        })
      },
    
    }) 
    page页面里.js一般是放data数据和事件监听的,这里data有一个navbar导航栏数据,还有一个记录当前位置的currentTab,字段可以自由命名,赋值的时候对应上就好,
     
    navbarTap 记得在home.wxml里面data-idx属性  currentTab: e.currentTarget.dataset.idx 把当前用户选择的Tab传给currentTab里,为了验证一下结果,我在这里面加入了一个输出日志console.debug(e);,可以在控制台上看输出的日志,我选择点击彩妆,输出台的数据idx:1刚好是彩妆的位置。


    3、显示导航页面wxml代码如下:
    <!--导航条-->  
    <view class="navbar">  
      <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>  
    </view>  
    home.wxml里面bindtap字段是事件监听的标识符,事件名称叫“navbarTap” 可以到home.js里查找到这个事件wx:for这个字段重点讲解,在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,这是官方解释,说白了就是item默认叫做变量的值,index表示第几个变量的值,可以参考下下面 微信 wx:for 的解析:
     
    * wx:for=”{{navbar}}”* 意思是虚幻navbar的数组数据
    {{item}} 这里面是navbar数组里面的值,如护肤、彩妆等值
    wx:key=”unique” 来指定列表中项目的唯一的标识符
    * data-idx=”{{index}}” *存储一些数据供home.js里调用,这里data-xxx,xxx就是你给home.js里提供的数据关键词,home.js通过获取xxx关键词来获取xxx里面的数据;
     

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议