大亨的学习日记-微信小程序（第五天）

大亨x2

于 2021-08-29 17:00:43 发布

阅读量148

点赞数

分类专栏：微信小程序文章标签：小程序微信

本文链接：https://blog.youkuaiyun.com/guoyonghengnb/article/details/119982347

版权

微信小程序专栏收录该内容

5 篇文章

订阅专栏

学习目标：

完成首页的设计

总目标：一周做完电商小程序并且写成毕业设计

学习内容：

1、完成了轮播图

添加swiper与swiper-item标签

<!-- 图片原大小 1125 * 352 px  -->
<view>
<swiper>
<swiper-item>  
<image mode="widthFix" src="//img.alicdn.com/imgextra/i1/64/O1CN01rs7VTZ1CLM3CoqBOO_!!64-0-luban.jpg" />
</swiper-item>
</swiper>
</view>

定宽高

轮播宽度设为最宽，高度需要计算一下（swiper高度 = swiper宽度 * 原图的高度 / 原图的宽度）
图片宽度设为最宽

swiper{
  width: 100%;
  height: calc(100vw * 352 / 1125);
}
image{
  width: 100%;
}

在这里插入图片描述

添加属性，让轮播图动起来

在这里插入图片描述

学习时间：

1、下午 3 点—下午 6 点

学习产出：

优快云技术博客 1 篇

Over
Good luck！