zoukankan      html  css  js  c++  java
  • 前端微信小程序实战篇

    电商底部导航栏的制作

    我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。

    app.json是用来配置page路径以及导航栏属性的,那我们要做首页、分类、购物车、个人中心界面就要在page也添加这几个界面,所以在app.json的page里添加如下代码,写入page路径,系统会自动帮你创建界面的

      "pages":[
        "pages/home/home",
        "pages/classify/classify",  
        "pages/cart/cart",
        "pages/mine/mine",
        "pages/index/index"
      ],

    好,既然添加了四个界面,那我们要怎么做底部导航栏呐,今天给app.json再添加一个属性,就是可以在app.json里配置导航栏,将下面代码添加到app.json里面

     "tabBar": {
        "color": "#858585",
        "selectedColor": "#f0145a",
        "backgroundColor": "#ffffff",
        "borderStyle": "#000",
        "list": [
          {
            "pagePath": "pages/home/home",
            "iconPath": "images/bottomNav/home.png",
            "selectedIconPath": "images/bottomNav/home_select.png",
            "text": "首页"
          },
          {
            "pagePath": "pages/classify/classify",
            "iconPath": "images/bottomNav/classify.png",
            "selectedIconPath": "images/bottomNav/classify_select.png",
            "text": "分类"
          },
          {
            "pagePath": "pages/cart/cart",
            "iconPath": "images/bottomNav/cart.png",
            "selectedIconPath": "images/bottomNav/cart_select.png",
            "text": "购物车"
          },
          {
            "pagePath": "pages/mine/mine",
            "iconPath": "images/bottomNav/mine.png",
            "selectedIconPath": "images/bottomNav/mine_select.png",
            "text": "我的"
          }
        ]
      }

    tabBar系统自带字段,不可改,添加这个字段就是告诉系统你要添加导航栏,color、selectedColor、backgroundColor从字面意思也字段,分别对应的属性是默认字体颜色、勾选字体颜色、背景颜色。着重说一下borderStyle,这个的定义底部导航栏与界面的边界线,属性有点特殊,特殊在如果你不想要这个分界线,可以把属性设置为white,剩下的不管你写入的是什么,系统都理解为要添加这条分界线,不信你可以试试。list属性自然是设置对应导航栏的界面啦,

    • pagePath:页面路径,就是你写在page里的路径
    • iconPath:默认导航栏图片路径
    • selectedIconPath:勾选图片的路径
    • text:导航栏名字

    这里要说的是,图片路径,一定要写对,不然找不到图片就显示不出来,这里给大家提供我的导航栏图片---提取码:8zwe 大家可以根据我的图片路径创建对应的文件夹,如下图


    1-1.png

    需要注意的:

    • 添加tabBar的时候别忘记别忘记上面有一个逗号,这个是用来区分每个属性的,所以你每添加一个属性都要用逗号分隔开来,这点要注意,不然会报错,这就是我把标点去掉的错误日志,一般报出错误日志Expecting 'EOF' XXXXXXXXX,got STRING都是语法错误,所以要仔细检查看看哪里少写了东西。

      1-2.png
    • 还有就是在.json文件里是不可以写注释的,我原本想添加一点注释方便读者阅读,然而会出现下面错误信息,解决办法很简单,把注释删除就可以啦

      1-3.png

      举一反三

      1. 我们创建了四个导航栏,那么如果我想再添加两个导航栏可以吗?
        你也许觉得很简单,试着去在list列表里添加两个了吧,我也是这么做的,但是出问题啦。系统会报错,这回知道了吧,最多只能是五个,没办法,谁让微信是老大,人家定最多五个那就只能最多五个喽!

        1-3.png
      2. 不知道你有没有注意到,导航栏默认首页勾选为红色,那么我想要默认勾选分类为红色呐,要怎么办?
        这个有点难度了吧,我刚开始想的是在tabBar属性把list里的第一个home属性和classify属性换一下应该就可以解决,然而并不是这样的,因为没有效果,后来也是一次误打误撞给发现的,我给你点小提示,有没有注意到,pages的第一个路径是什么pages/home/home,没错,就是它,如果想要分类classify作为默认的勾选项,你只需要在pages属性把home的路径和classify路径换一下,保存,重新编译一下,你要的效果就出来了,这里可以总结的一点就是,tabBar是到page里的第一行路径作为默认勾选项的。

    电商顶部导航栏制作

    既然讲了导航栏,干脆今天多讲解一点,接着教教大家顶部导航栏怎么制作,先上效果图


    2-1.png


    这个导航栏可不像底部导航栏啦,因为他的级别比较低,是页面级别的导航栏,所以要写在页面里,你想要在哪个页面加入顶部导航栏就在哪个页面里添加如下代码,这里以首页的界面为例:
    home.wxss

    /* 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;  
    }

    home.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里面的数据

    home.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
        })
      },
    
    })

    home.js,这里读过微信小程序入门篇(二)都知道,page页面里.js一般是放data数据和事件监听的,这里data有一个navbar导航栏数据,还有一个记录当前位置的currentTab,字段可以自由命名,赋值的时候对应上就好,

    • navbarTap 记得在home.wxml里面data-idx属性吗,在这里用到,currentTab: e.currentTarget.dataset.idx 把当前用户选择的Tab传给currentTab里,为了验证一下结果,我在这里面加入了一个输出日志console.debug(e);,可以在控制台上看输出的日志,我选择点击彩妆,输出台的数据idx:1刚好是彩妆的位置。

    2-2.png

    总结

    今天我们讲解的微信小程序的底部导航栏和顶部导航栏,导航栏应该说是必须的对于电商小程序来说,那么今天的导航栏教程你掌握了吗?

    学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
    343599877,我们一起学前端!

  • 相关阅读:
    UVA 1025 A Spy in the Metro DP水题
    ZOJ 3814 Sawtooth Puzzle BFS
    ZOJ 3816 Generalized Palindromic Number
    UVA 10859 Placing Lampposts 树形DP
    UVA 11825 Hackers' Crackdown 状压DP
    POJ 2887 Big String 线段树 离线处理
    POJ 1635 Subway tree systems Hash法判断有根树是否同构
    BZOJ 3110 k大数查询 & 树套树
    sdoi 2009 & 状态压缩
    来自于2016.2.24的flag
  • 原文地址:https://www.cnblogs.com/jiaoyu121/p/6974027.html
Copyright © 2011-2022 走看看