#小程序# 页面跳转、顶部滑动导航栏

#小程序# 页面跳转、顶部滑动导航栏

1、底部栏的制作

在app.json里面：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/class/class",
    "pages/cart/index/cart",
    "pages/center/center"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  
  //这个就是底部栏
  
  "tabBar":{
    "color": "#7c7c7c", //显示的文字颜色
    "selectedColor": "#f7545f", //点击以后的文字颜色
    "borderStyle":"white",
    "backgroundColor":"#ffffff",
    "list" : [ //list是指底部栏的图标加文字，通过数组进行渲染
      {
          "pagePath": "pages/index/index", //跳转页面
          "iconPath": "assets/barbar/icon/course_unselect.png",// 显示的图标
          "selectedIconPath": "assets/barbar/icon/course_select.png",// 点击以后的图标
          "text": "首页"// 图标下面的文字
      },
      {
        "pagePath": "pages/cart/index/cart",
        "iconPath": "assets/barbar/icon/home_unselect.png",
        "selectedIconPath": "assets/barbar/icon/home_select.png",
        "text": "所有商品"
      },
      {
        "pagePath": "pages/class/class",
        "iconPath": "assets/barbar/icon/user_unselect.png",
        "selectedIconPath": "assets/barbar/icon/user_select.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/center/center",
        "iconPath": "assets/barbar/icon/zstp0.png",
        "selectedIconPath": "assets/barbar/icon/zstp1.png",
        "text": "个人中心"
      }
    ]
  }
}

2、页面里内嵌组件（父子组件）

父组件的（father.wxml）页面：

<!--pages/cart/cart.wxml-->
<scroll-view scroll-y="true" >
<view class="cart-pc"><image src="/assets/barbar/img/index17.jpg" mode="widthFix" ></image></view>
<view class="cart-pc"><image src="/assets/barbar/img/index15.jpg" mode="widthFix" ></image></view>
</scroll-view>
<sales></sales>
<cartcon></cartcon>

父组件的 （father.json）页面：

{
  "usingComponents": { 
    "sales": "/pages/cart/sales/sales",
    "cartcon": "/pages/cart/cartcon/cartcon"
  }
}

子组件的（child.wxml）页面
记得用一个大的view进行包裹

子组件的（child.json）页面：

{
  "component": true,
  "usingComponents": {}
}

3、顶部导航栏的制作

可以在assets里面加，或者在首页index里面写
第一步：

第二步，在tab页面进行写内容

tabs.wxml

<!--assets/tabs/tabs.wxml-->
<view class="tabs">
	<scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx">
		<view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}">
			<view class="nav-text {{index==tabCur?'tab-on':''}}">{{item}}</view>
		</view>
	</scroll-view>
</view>

tabs.js

  // assets/tabs/tabs.js
	Page({

		/**
		 * 页面的初始数据
		 */
		data: {
			tabCur: 0, //默认选中
			tabs: [ '今日推荐','时尚美妆', '个护清洁', '家居好物', '生鲜水产',]
		},
		//选择条目
		tabSelect(e) {
			// let id = e.currentTarget.dataset.id;
			// let url = this.data.tabs[id].url
			// wx.redirectTo({
			// 	url: url
			// })
			this.setData({
				tabCur: e.currentTarget.dataset.id,
				scrollLeft: (e.currentTarget.dataset.id - 2) * 200
			})
			},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
	
		},
	
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function () {
	
		},
	
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function () {
	
		},
	
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function () {
	
		},
	
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function () {
	
		},
	
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function () {
	
		},
	
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {
	
		},
	
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function () {
	
		}
	})

tabs.wxss

/* 导航栏布局相关 */
.navbar {
  width: 100%;
   height: 90rpx;
  /* 文本不换行 */
  white-space: nowrap;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1rpx solid #eee;
  background: #fff;
  align-items: center;
  /* 固定在顶部 */
  position: fixed;
  left: 0rpx;
  top: 0rpx;
}

.nav-item {
  padding-left: 25rpx;
  padding-right: 25rpx;
  height: 100%;
  display: inline-block;
  /* 普通文字大小 */
  font-size: 28rpx;
}

.nav-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 4rpx;
  box-sizing: border-box;
}

.tab-on {
  color: #fbbd08;
  /* 选中放大 */
  font-size: 35rpx !important;
  font-weight: 600;
  border-bottom: 4rpx solid #fbbd08 !important;
}

第三步：
因为我们是需要顶部导航栏在首页进行展示
所以我们也应该在首页的文件里面进行调用引入

index.wxml（首页）

	<view class="index-page">
	<tabs id="comp"></tabs>
	</view>

index.json（首页）

	{
	"usingComponents": {
		"tabs": "/assets/tabs/tabs"
	}
	}

index.js（首页）

Page({

	/**
	 * 页面的初始数据
	 */
	data: {
	
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		this.compData = this.selectComponent("#comp")
	},
})

效果

4、点击顶部导航栏跳转到相应的页面

在做完顶部导航栏的页面以后，
如果我们要在点击各个相应的导航栏板块，
跳转到相应的页面的时候，

只需要在pages里面新建子组件，
然后在 tabs.wxml 和tabs.wxss这两个页面里面，加入相应的组件就可以了

tabs.wxml

<!--assets/tabs/tabs.wxml-->
<view class="tabs">
	<scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx">
		<view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}">
			<view class="nav-text {{index==tabCur?'tab-on':''}}">{{item}}</view>
		</view>
	</scroll-view>	
<today wx:if="{{ tabCur == 0}}"></today>
</view>

tabs.json

{
  "component": true,
  "usingComponents": {
      "today" : "/pages/today/index"
  }
}