微信小程序之轮播图，导航栏

 

一个小程序的基本目录结构如下图：                                             

project
├── pages
|   ├── index
|   |   ├── index.json  index 页面配置                                                               
|   |   ├── index.js    index 页面逻辑
|   |   ├── index.wxml  index 页面结构                                                        
|   |   └── index.wxss  index 页面样式表
|   └── log
|       ├── log.json    log 页面配置
|       ├── log.wxml    log 页面逻辑
|       ├── log.js      log 页面结构
|       └── log.wxss    log 页面样式表
├── app.js              小程序逻辑
├── app.json            小程序公共设置
└── app.wxss            小程序公共样式表

 

1、界面底部的导航栏效果：

在app.json利用开发环境提供的组件tabBar即可完成：

 "tabBar": {
    "color": "#707070",
    "selectedColor": "#ea9518",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/Mainpage/Mainpage",//tabar对应哪一个个页面
        "text": "首页",//标题
        "iconPath": "/resource/主页2.png",//图标来源
        "selectedIconPath": "/resource/主页 1.png"//选中后更换的图标来源
        
      },

      {
        "pagePath": "pages/search/search",
        "text": "搜索",
        "iconPath": "/resource/放大镜2.png",
        "selectedIconPath": "/resource/放大镜 1.png"
      },
  
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "/resource/我的2.png",
        "selectedIconPath": "/resource/我的 1.png"
      }
    ]
    
  },

 

2、界面中常用的轮播图片：

在微信小程序中，构建轮播图片非常简单，只需要用小程序中的组件swiper即可

 

代码格式为：

 //轮播容器

  //轮播项

    //轮播图

  

每一个swiper-item对应一个轮播项，有时我们需要的轮播图较多，通常将图片存到数组中，用循环将其取出。

微信小程序的循环格式为：wx:for="{{数组名}}"

 

通常我们将数组写在js中的初始数据data中

官方文档链接：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

可参考修改轮播图、指示点等的样式。

 

3、可拉动导航栏效果：

 

通过小程序组件scroll-view即可实现

 //scroll-x表示横向拉动，使用scroll-y可竖向拉动
  
    导航1
    导航2
    导航3
    导航4
    导航5
    导航6
    导航7
    导航8
    导航9
    导航10
    导航11
    导航12
    导航13
    导航14
  

官方文档链接：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

官方文档说的十分详细。