怎么下载网站备案号,网络规划毕业设计,哪家网络公司做网站,四川网站建设贴吧这一节我们实现轮播图最外层的盒子#xff0c;也就是把轮播图的最外层搭好#xff0c;先不给轮播图添加图片#xff0c;因为图片属于新的组件#xff0c;组件里面有一些知识点#xff0c;需要单独分开讲#xff1b;
回顾一下#xff0c;在进行传统网页开发时#xff0…这一节我们实现轮播图最外层的盒子也就是把轮播图的最外层搭好先不给轮播图添加图片因为图片属于新的组件组件里面有一些知识点需要单独分开讲
回顾一下在进行传统网页开发时实现轮播图的时候我们首先使用 html、css 实现轮播图的结构样式然后使用 JS 控制轮播图的效果或者直接使用插件实现轮播图的功能而在小程序中实现小程序功能则相对简单很多
在小程序中如果想实现轮播图只需要两个组件swiper 和 swiper-item
swiper滑块视图容器可以简单理解为轮播图最外层的容器是轮播图的盒子swiper 中不能放置其它任何内容只能放置 swiper-item 组件如果放置了其它内容内容是不会进行展示的swiper-item只可放置在 swiper 组件中宽高自动设置为 100%也就是占满 swiper 这个容器的宽和高代表 swiper 中的每一项也就是每一张轮播图
下面打开微信开发者工具实现轮播图最外层的结构 切换到首页目录打开 index.wxml 文件在轮播图区域中实现轮播图的结构在最外层写一个 swiperswiper 是轮播图最外层的盒子注意在 swiper 内部只能设置 swiper-item在 swiper-item 中编写内容才能在页面上正常显示编写的内容我们需要三张轮播图所以需要三个 swiper-item其代码如下 view classswiperswiperswiper-item1/swiper-itemswiper-item2/swiper-itemswiper-item3/swiper-item/swiper
/view通过上面的代码就已经把轮播图的结构写好了我们可以到模拟器中滑动界面观察轮播图的效果 由于我们还没有编写 css 样式所以目前轮播图的效果还不是很明显下面我们来添加一些样式我们打开 index.scss 文件添加对应的样式代码如下 // 轮播图区域样式
.swiper {swiper {height: 360rpx;background-color: skyblue;swiper-item{// 在 Sass 中代表的是父选择器引用的意思// swiper-item:first-child 表示取父选择器的第一个 swiper-item// swiper-item:last-child 表示取父选择器的最后一个 swiper-item:first-child{background-color: lightsalmon;}:last-child{background-color: lightseagreen;}}}
}这里为了区分不同的 swiper-item使用伪类选择器来设置不同 swiper-item 的背景颜色具体效果如下 目前轮播图是不能够自动播放的需要通过手动进行滑动如果想轮播图自己播放需要给 swiper 添加一个 autoplay 属性 这个属性接收一个布尔值作为参数我们设置为 true即可实现自动播放效果 如果一个属性的值是布尔值属性值可以不写不写表示其值为 true这样我们同样可以实现自动播放效果如下 设置了自动切换之后可以继续设置切换间隔时长我们可以在 swiper 中使用 interval 属性设置切换间隔这里我们设置为间隔 1s 进行切换如下 设置自动切换、切换时长后我们可以继续对轮播图添加其它属性比如指示当前是第几场轮播图的选点功能我们可以在 swiper 中添加一个 indicator-dots 属性其属性值是布尔值因此我们可以不填属性值默认为 true具体如下所示 如果感觉选点不符合样式需求可以根据实际情况进行修改比如可以使用 indicator-color 属性修改选点的颜色如下 上面被激活的选点的颜色为黑色如果我们觉得不好看可以在 swiper 中使用 indicator-active-color 属性来调整激活后选点的颜色 目前轮播图到第三张图片之后会往前切换到第一张当我们希望轮播图往后切换到第一张的时候这个时候我们可以加另外一个 circular 属性其属性值为布尔值所以我们可以不写属性值默认为 true如下所示 上面只讲了 swiper 中的一部分属性功能具体更详细的功能可以前往官方文档进行学习
参考视频尚硅谷微信小程序开发教程
