微信小程序|轮播图

欢迎点击「算法与编程之美」↑!

本文首发于微信公众:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

什么是轮播图?

轮播图通俗的说就是在一个模块或者说窗口,通过电脑上鼠标点击、手机上手指滑动后,可以看到多张图片。轮播图的位置一般放置在页面首部,具有内容醒目、重点突出等特点。轮播图在一般的页面中常用于特色推荐,如淘宝网上轮播图中的都是商品以及其他一些好物推荐。轮播图在使用过程中,最重要的一个特点就是实时更新。小程序中的轮播图也大致具有以上特点。

解决方案

小程序中的标签:

微信小程序的制作与前端制作是类似的,制作流程也极度相似,依旧是框架编写,样式修改,功能设置。但是微信小程序与的标签是完全不一样的,微信小程序有自己的编写标签。轮播图编写过程中,我们经常会用到的标签是、、 、、。其中比较重要的就是标签,它是一个滑块容器类组件,提供如下的一些属性。

图2.1 常见属性

轮播图的制作:

在了解上述基础知识,结合我们已经学习的知识就可以开始轮播图的制作了。滑块组件代码,具有-,,,个属性。-:是否显示面板指示点(默认值)、:是否自动切换(默认值)、:自动切换时间间隔(默认值5000)、:滑动动画时长(默认值500)。

.文件的代码如下:

在.文件中,我们只需要对相关标签设置一定的属性就行。因为本次我们制作的是轮播图,所以相关数值就只有图片。在.文件中,对的值进行赋值。

({

: {

: '', //搜索的内容

//轮播图

: [

{ : '//1.' },

{ : '//2.' },

{ : '//3.' },

{ : '//4.' }

],

}

}]

效果图如下:(截图不完整)

图3.1 效果图

实习主编 王楠岚

责 编 刘 连

2 团队

微:算法与编程之美

长按识别二维码!

温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

© 版权声明
THE END
分享