玩转微信小程序（第四天）

今日需要完成内容

一，完成轮播图效果

需要用到的组件
swiper 滑块视图容器。其中只可放置swiper-item组件，可以实现轮播图效果
一些比较常用的属性
indicator-dots 是否显示面板指示点
autoplay 是否自动切换
interval 自动切换时间间隔
circular 是否采用衔接滑动

swiper-item仅可放置在swiper组件中，宽高自动设置为100%

了解更多

使用方法
注意要把图片放在swiper-item里每一个swiper-item对应一张图片

二，实现滑动效果

需要用到的组件

scroll-view 是微信小程序中一个非常实用的组件，它允许你创建可滚动的区域，这对于展示大量内容或长列表时非常有用。scroll-view 组件提供了多种滚动方式，包括垂直滚动、水平滚动，甚至可以自定义滚动条的样式。
一些属性
scroll-x：是否横向滚动，默认值为 false。
scroll-y：是否纵向滚动，默认值为 false。
scroll-top：设置竖向滚动条位置的值。
scroll-left：设置横向滚动条位置的值。
了解更多

2.1这里建议把scroll-view套用在view里使用

scroll-view里一个view代表着一个区域

2.2把图片进行横向排列并且不换行

这里需要用到 white-space: nowrap 强制在一行内显示
要想让布局看起来更整洁需要用到display: inline-block来进行布局

三，实现文字显示在图片上的效果

3.1先实现简单的布局

部分代码
这里需要注意的是文字建议用view来写可以实现独占一行的效果

3.2样式的实现

这里需要注意的是是同绝对定位前建议创建一个父级容器来承载它

部分代码

四，自定义组件设置跳转和文字

如果要实现功能首先需要在components 创建一个文件夹在文件夹里创建一个component文件

4.1wxml效果

wxml实现效果，想要跳转必须open-type来确定要传到哪一个文件

redirect 仅跳转不传值
switchTab 跳转到tab选项卡中
reLaunch跳转且传值
了解更多

4.2js效果

这里需要在js文件里定义两个属性，注意不要把属性写在data下

type是文字类型
value是输入的值

4.3如何在页面中实现

五，拓展知识

5.1文字变成大写或者文字变成小写

这里需要用到样式里的text-transform

将文字变为大写text-transform: uppercase;
将文字变为小写text-transform: lowercase;

5.2把一行文字以后的字变为省略号

需要用到以下样式：

white-space: nowrap 强制文本在一行内显示
overflow: hidden 隐藏超出部分
text-overflow: ellipsis 当文本溢出时是否显示省略标记

这里需要设置一个宽度才可以实现功能