轮播图-微信小程序（二手交易）

跟随B站“编程小石头”学的。主要是数据库不会弄。另外Mac系统和win系统不一样，具体差别得看微信开发文档，我用的是window系统

1、头部设置和底部设置。

在app.json文件 "window"里面设置，字体内容、颜色、头部背景修改如下图所示。其中背景颜色只能用#XXXXX表示，字体颜色只能设置black或者white。

底部设置页面选项：

在app.json文件中设置tabbar

"tabBar": {

"color": "#515151",

"selectedColor": "#2E8B57",

"borderStyle": "white",（这几个不说了，看英文就懂）

"list": [

{

"selectedIconPath": "image/tab1ok.png",选中图标路径

"iconPath": "image/tab1ok.png",图标路径

"pagePath": "pages/home/home",目标页面路径

"text": "首页"

},(如果后面还有页面就有“，”，没有就无“，”需要是英文状态下的逗号。

另外，主义tabbar位置。

"style": "v2",

"sitemapLocation": "sitemap.json"

这两项需要在最后面，否则可能会频繁报错。我试了调换window和tabbar、删除逗号等等还是报错，然后发现上面两行需要在最后，才没有报错。

2、轮播图

轮播图有两种编写形势。一是直接在wxml文件中放置，而是js文件中（后续会使用js方式，加上云开发更新轮播图片）。ps:如果代码没有错误，但是报错图片无法显示，可以把图片路径删除，重新打引号和斜杠，会自动出现image文件选项，一路选择下来，选中需要的图片就可以了。

首先设置图片css：

/* 顶部轮播图 */

swiper{

height: 450rpx;

}

swiper-tem{

width: 100%;

height: 100%;

}

swiper-item image{（图片大小不一，设置图片填满规定区域）

width: 100%;

height: 100%;

}

其次：swiper是微信小程序的轮播图组件：

autoplay设置自动轮播；

indicator-dots="ture"设置原点指示当前图片

indicator-dots indicator-active-color="red" 设置指示点颜色

circular="ture"设置衔接轮播（视频中没有设置衔接，个人喜欢衔接轮播。其他功能设置可以看官方微信开发文档）

第一种轮播设置：

第二种轮播设置：

需要在js问价中的data添加传输内容如下第一张图。（我的图片放置位置是和pages同级目录。）

然后在wxml中引入：

<swiper-item wx:for="{{topImgs}}">

<image src="{{item}}"></image>

</swiper-item>

3、效果图