玩转微信小程序第四天
今日需要完成内容
一，完成轮播图效果
需要用到的组件
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 当文本溢出时是否显示省略标记
这里需要设置一个宽度才可以实现功能
标签：文字,效果,微信,跳转,玩转,第四天,组件,scroll,view From： https://blog.csdn.net/sensen2580/article/details/140229984