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

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

上一篇 下一篇
微信小程序商城电商整套系列相关推荐:
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里面的数据;
 

模板简介:该模板名称为【微信小程序开发页面顶部导航栏制作设计】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 55,542次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 05-14
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信图片 微信公众平台 自适应 响应式 单页式简历模板 html5 企业网站 微信素材 微信文章 微信模板
您可能会喜欢的其他模板