Day7-微信小程序实战-交友小程序首页UI

一般都是直接用微信提供的组件来进行布局的

在小程序中最好少用id，尽量用class

轮播图就是直接用swiper

直接在微信开发者文档里面-》组件-》swiper-》示例代码

<swiper indicator-dots="{{indicatorDots}}"

        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

        <block wx:for="{{background}}" wx:key="*this">

          <swiper-item>

            <view class="swiper-item {{item}}"></view>

          </swiper-item>

        </block>

      </swiper>

①其中indicator-dots是设置轮播图上面那个点的样式，用true就是直接写死，也就是保留这个轮播图　　

②是否可以轮播通过autoplay

③interval是轮播的时间、duration是间隔的时间

下面进行测试，通过在网上找了三张图片，然后在index.js里面设置了一个imgUrls的数组，把这三张图片的链接都放进去

在index.js中data域里面

  data: {

    imgUrls: ['http://pic16.photophoto.cn/20100806/0005018388944073_b.jpg',

      'http://k.zol-img.com.cn/dcbbs/19063/a19062586_01000.jpg',

      'http://k.zol-img.com.cn/dcbbs/19063/a19062586_01000.jpg'

      ]

  },

然后就可以在index的html里面调用了，通过wx:for来遍历这个数组里面的每一个元素，最好就是添加上wx:key来指定下标index

通过给image提供item作为src链接

效果图：

但是可以看到，这边都是没在中心区域的，然后偏离的了

==所以这个时候就要对轮播图进行样式的添加，让他的位置变得正常起来即可了

.index-swiper{margin: 20rpx;}

.index-swiper image{

  width: 100%;

}

通过给整个轮播图的margin进行设置，然后给轮播图里面的每一个图片都设置了宽度

效果图：

之后让这个图片更好看一点的话，就可以给这个图片设置圆角的，

搞了圆角之后会发现上面是圆角的，但是下面还是方的，这个时候一般都是因为在wxml中就给图片设置了宽度和高度，才出现这个情况，所以要把

提前设置的宽度和高度都高掉，然后还要通过wxss把这个轮播图的高度也定死了，然后把轮播图也加上圆角，和溢出隐藏

.index-swiper{margin: 5rpx 20rpx 5px;

height: 300rpx;

border-radius: 10rpx;

 overflow: hidden;}

.index-swiper image{

  width: 100%;

  border-radius: 10rpx;

  overflow: hidden;

}

效果图：

就达到了四个角都是圆角的效果了

如果是要对这个轮播图衔接滑动得话，也可以通过circular来设置得

circular="{{true}}"

2、下面就是对两个推荐最新进行排榜了】

直接定义两个view然后放在一个大的view里面

<view class="index-tab">

        <view>推荐</view>

        <view>最新</view>

      </view>

这种布局在wx里面一般都是直接用flex布局会好得多的

先对整个大的定义为flex布局

之后对里面两个view的项目进行flex=1 也就是宽度自适应，=1的时候由flex布局的知识，他们就会变大，由于都等于=1

所以会把全部的空格都占满，然后占的空间也都是50%的

然后还要把里面的文字进行居中

.index-tab{

  display:flex;

}

.index-tab view{

  flex:;

}

效果图

由于这个是选项框，也就是选择其中一个就可以看到对应的内容

所以就要加上选中的样式会变成什么样的，通过.active来添加样式（这里是给其中一个写死了）

之后再对这个padding和margin撑出来，好看点，然后再把选中的文字变成是红色的即可了

得到的效果就是：

3、之后就是对列表中的推荐或者最新用户的信息显示了

.index-list{display: flex;

            flex-wrap: wrap;

            /* //z自动转行} */

}

.index-list-item{width: 50%;}

.index-list-item image{

  width: 90%;

  height: 250rpx;

  margin: 0 auto;

display: block;

  }

通过flex布局，为了抗议主动换行，就抗议用wrap

为了让每张图片都抗议居中，通过

  margin: 0 auto;

display: block;
得到的效果：

把图片搞好了，还要把点赞等等信息也加上才行了

注意：在wx中text标签其实和html中的span很像，就是用于考研放一行的非块级标签

只是给了这个昵称和点赞部分进行了如下设置发现，两个部分都没在两边放着

.index-list-text{

  /* 让用户昵称和点赞部分分开在两边即可了 */

  display:flex;

  justify-content:space-between;

}

效果图：

这是因为这整个部分用的是text（文本的话就不行了，要用块级的view，并且还要给这个view设置宽度

<text class="index-list-text">

          <!-- 昵称 -->

          <text>小喵喵</text>

          <text>

          <!-- 点赞图标 -->

              <text class="iconfont icondianzan"></text>

          <!-- 点赞数 -->

              <text>100</text>

          </text>

          </text>

.index-list-text{

  width: 90%;

  /* 让用户昵称和点赞部分分开在两边即可了 */

  display:flex;

  justify-content:space-between;

}

才行的

效果图：

然后还发现了这个昵称【小喵喵】跑到左边去了，所以就要对这个view 中的文本text进行居中，即可

.index-list-text{

  width: 90%;

  /* 让用户昵称和点赞部分分开在两边即可了 */

  display:flex;

  margin: 0 auto;

  justify-content:space-between;

}

【小细节】在列表中的图片，其实是不成比例的，导致被压缩，可以在wx开发文档-》组件-》媒体组件-》image

使用下面的aspectfill 来保持横纵比缩放了

巴特西

Day7-微信小程序实战-交友小程序首页UI

最新文章

热门文章