微信小程序开发系列（六）

今天这一讲我把之前的首页做了优化，增加了几个常用的模块，这里教大家怎么写，先来看一下图

我们来看一下新的布局，先说一下搜索是怎么写的，我个来看代码

<view class="view-search" bindtap="searchPage">

    <image class="search-image" src="/images/search.png"></image>

    <text class="text-search">请输入商户名称</text>

  </view>

其实挺简单的，就是一个view标签，属性设置成横向排列，里面加一个图片和文字，写一个点击事件

css样式如下，这里我给大家说一下，我们还是上代码

.view-search{

  background: #f9f9f9;

  width: 94%;

  height: 60rpx;

  margin-left: 25rpx;

  margin-right: 20rpx;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  text-align: center;

  border-radius: 30rpx;

  margin-top: 5rpx;

  margin-bottom: 5rpx;

}

 

.search-image{

  width: 28rpx;

  height: 28rpx;

  justify-content: center;

  align-items: center;

  text-align: center;

}

.text-search{

  font-size: 25rpx;

  color: #cdcdcd;

  margin-left: 10rpx;

  justify-content: center;

  align-items: center;

  text-align: center;

}

这个挺简单的，如果有不明白的给我留言

下面我们看轮播图是怎么写的，这也是一个常用的功能

<swiper autoplay="true" circular="true" duration="500" indicatorActiveColor="#ef8200" indicatorColor="rgba(255,255,255,.7)" indicatorDots="true" interval="5000">
    <swiper-item wx:for="{{3}}" wx:key="{{index}}">
      <image bindtap="toRedirect" class="slide-image" data-action="{{item.bind}}" height="280" mode="scaleToFill" src="/images/timg.jpg"></image>
    </swiper-item>
  </swiper>

我们看一下，是用一个swiper标签写的，具体的用法大家可以看一下小程序官方API，这里我简单说一下

我们可以看到swiper里面包了一个图片，然后我们通过一个循环来确定要循环几张图，我这里是写死的长度是3，

一般for里面的数据是通过接口获取的，然后赋值给一个数组，再循环就可以了

这里我把这个控件的参数设置给大家列举了出来，大家可以自己对比设置

下面说一个比较重要的地方，如果你想要把swiper当中的图片设置成圆角的话那么要写一下样式

swiper {
    height: 260rpx;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-left: 30rpx;
    margin-right: 30rpx;
    margin-top: 10rpx;
    border-radius: 20rpx;
    width: 700rpx;
    overflow:hidden;
}

最关键的一步就是 overflow:hidden;这一句一定要加上，这句的作用是，

图片在滚动切换的时候，不会出现方形的边角，如果不加切换的时候

会先是方形再变成圆形，会非常的难看，这一点大家一定要注意

这一讲内容有点多，暂时先讲到这里，我不想写太多，怕大家学不过来

一点一点消化知识会好一些，大家先自己试试吧。