欢迎点击「算法与编程之美」↑!
本文首发于微信公众:"算法与编程之美",欢迎关注,及时了解更多此系列文章。
问题描述
什么是轮播图?
轮播图通俗的说就是在一个模块或者说窗口,通过电脑上鼠标点击、手机上手指滑动后,可以看到多张图片。轮播图的位置一般放置在页面首部,具有内容醒目、重点突出等特点。轮播图在一般的页面中常用于特色推荐,如淘宝网上轮播图中的都是商品以及其他一些好物推荐。轮播图在使用过程中,最重要的一个特点就是实时更新。小程序中的轮播图也大致具有以上特点。
解决方案
小程序中的标签:
微信小程序的制作与前端制作是类似的,制作流程也极度相似,依旧是框架编写,样式修改,功能设置。但是微信小程序与的标签是完全不一样的,微信小程序有自己的编写标签。轮播图编写过程中,我们经常会用到的标签是、、 、、。其中比较重要的就是标签,它是一个滑块容器类组件,提供如下的一些属性。
图2.1 常见属性
轮播图的制作:
在了解上述基础知识,结合我们已经学习的知识就可以开始轮播图的制作了。滑块组件代码,具有-,,,四个属性。-:是否显示面板指示点(默认值)、:是否自动切换(默认值)、:自动切换时间间隔(默认值5000)、:滑动动画时长(默认值500)。
.文件的代码如下:
></p>
->
></p>
></p>
></p>
在.文件中,我们只需要对相关标签设置一定的属性就行。因为本次我们制作的是轮播图,所以相关数值就只有图片。在.文件中,对的值进行赋值。
({
: {
: '', //搜索的内容
//轮播图
: [
{ : '//1.' },
{ : '//2.' },
{ : '//3.' },
{ : '//4.' }
],
}
}]
效果图如下:(截图不完整)
图3.1 效果图
实习主编 王楠岚
责 编 刘 连
2 团队
微:算法与编程之美
长按识别二维码!
温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!