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

 

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

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> //轮播容器

  <swiper-item>//轮播项

    <image src=""></image>//轮播图

  </swiper-item>

</swiper>

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

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

 <swiper class='item' autoplay='true' interval='4000' circular='true' indicator-dots='ture' indicator-color='rgba(0,0,0,0.3)' indicator-active-color='red'>
    <swiper-item wx:for="{{imglist}}">
      <image src='{{item.imgurl}}'></image>
    </swiper-item>
  </swiper>

 

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

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

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

 

3、可拉动导航栏效果：

 

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

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

</scroll-view>

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

官方文档说的十分详细。