小程序coffee项目

1.新建一个项目,将需要的图片文件放到项目根目录中

2.在 app.json文件中的pages中,添加项目需要的路由,添加完成后文件目录会自动生成

 3.在app.json中添加底部tapBar

  "tabBar": {
    "list": [
      {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/bar/bar1_1.png",
      "selectedIconPath": "/images/bar/bar1.png"
    },
    {
      "pagePath": "pages/menu/menu",
      "text": "菜单",
      "iconPath": "/images/bar/bar2_2.png",
      "selectedIconPath": "/images/bar/bar2.png"
    },
    {
      "pagePath": "pages/new/new",
      "text": "新品",
      "iconPath": "/images/bar/bar3_3.png",
      "selectedIconPath": "/images/bar/bar3.png"
    },
    {
      "pagePath": "pages/service/service",
      "text": "小二",
      "iconPath": "/images/bar/bar4_4.png",
      "selectedIconPath": "/images/bar/bar4.png"
    }
  ]
  },

 刷新后即可显示

 4.在tapBar中添加选中的文字样式和未选中的文字样式

 "color":"#ccc",
 "selectedColor": "#333999",

 5.将图片路径放入data数组中,在wxml文件中使用for循环进行遍历,运行后即可显示图片

 wxml文件

<!--pages/home/home.wxml-->
<swiper>
  <swiper-item wx:for="{{backgroundArr}}" wx:key="*this">
  <!-- 使用data中的数组代替图片路径 -->
    <image src="{{item}}"></image>
    <!-- <image src="/images/banner/baner1.jpg"></image> -->
  </swiper-item>
</swiper>

 js文件中

  data: {
    backgroundArr: [
      "/images/banner/baner1.jpg",
      "/images/banner/baner2.jpg",
      "/images/banner/baner3.jpg",
      "/images/banner/baner4.jpg"
    ]

  },

 6.给轮播图设置样式

wxml文件中

<!--pages/home/home.wxml-->
<!-- indicator-dots="true" 显示小圆点 -->
<!-- indicator-active-color="#333999" 设置小圆点颜色 -->
<!-- autoplay="true" 设置轮播图自动轮播 -->
<swiper indicator-dots="true" indicator-active-color="#333999" autoplay="true">
  <swiper-item wx:for="{{backgroundArr}}" wx:key="*this">
  <!-- 使用data中的数组代替图片路径 -->
  <!-- mode="widthFix" 宽度不变高度自适应 -->
    <image mode="widthFix" src="{{item}}"></image>
    <!-- <image src="/images/banner/baner1.jpg"></image> -->
  </swiper-item>
</swiper>

wxss文件中

swiper image{
width: 100%;
}
/* 加上calc()可在括号内进行计算 */
swiper{
  height: calc(100vw*720/1080);
}

7.通过组件的方式添加标题

在home文件夹中添加一个tem.wxml文件

<template name="title">
  <view class="title">
    <!-- <text>咖啡的故事</text> -->
    <text>{{content}}</text>
  </view>
</template>

在home.wxml文件夹中进行引用

<import src="./tem.wxml"></import>
<template is="title" data="{{content:'咖啡的故事'}}"></template>

<template is="title" data="{{content:'新品展示'}}"></template>

home.wxss样式

.title {
  height: 100rpx;
  position: relative;
}

.title::before {
  content: "";
  width: 40%;
  position: absolute;
  height: 4rpx;
  background-color: #ccc;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.title text {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:0 auto;
  width: 30%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fff;
}