微信小程序开发项目实战(五)

一、项目中要注意到的点
1、删除多余文件的时候我们一定要先把app.json中的pages数组中删除,再去删除文件夹。
2、我们会发现在image文件夹中的图片都有@3这样的图标,意思是设计师给的是三倍的高清图片。
3、底部的tabBar建议设计师设计的尺寸为81px*81px,否则可能会在某些机型上出现模糊的bug。
伸缩盒(flex)布局实现内容水平垂直居中

 /* flex伸缩盒布局 */
  display: flex;
  /* 水平居中对齐 */
  justify-content: center;
  /* 垂直居中对齐 */
  align-items: center;

4.出现以下情况:
在这里插入图片描述
微信小程序中是不允许使用背景图片的,可以使用image标签、网络图片、base64三种方式。
5.微信小程序中轮播图的实现:
在官方文档-组件中有现成的可以用的轮播组件swiper,通过看官方文档我们会发现轮播由一个个swiper-item组成

<swiper>
  <swiper-item class="swiper-index">
    <image src='/upload/banner1.png' class='swiper-img'></image>
  </swiper-item>
  <swiper-item>
    <image src='/upload/banner2.png' class='swiper-img'></image>
  </swiper-item>
  <swiper-item>
    <image src='/upload/banner3.png' class='swiper-img'></image>
  </swiper-item>
</swiper>

另外可以通过添加属性来调节轮播图,官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

<swiper indicator-dots='true' indicator-color='rgba(255, 255, 255, .3)' indicator-active-color='#fff' autoplay='true' interval='2500' circular='true' skip-hidden-item-layout='true'>
  <swiper-item class="swiper-index">
    <image src='/upload/banner1.png' class='swiper-img'></image>
  </swiper-item>
  <swiper-item class="swiper-index">
    <image src='/upload/banner2.png' class='swiper-img'></image>
  </swiper-item>
  <swiper-item class="swiper-index">
    <image src='/upload/banner3.png' class='swiper-img'></image>
  </swiper-item>
</swiper>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值