前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序|轮播图

微信小程序|轮播图

原创
作者头像
用户7118204
修改2020-04-07 12:07:17
2.3K0
修改2020-04-07 12:07:17
举报
文章被收录于专栏:Android逆向分析从入门到深入

问题描述

什么是轮播图?

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

解决方案

小程序中的标签:

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

图2.1 swiper常见属性

轮播图的制作:

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

.wxml文件的代码如下:

代码语言:javascript
复制
<view>
  <!--轮播图-->
     <swiper indicator-dots='true' autoplay='true' interval='5000'  duration='1000' circular='true'>
       <block wx:for="{{movies}}" wx:for-index="index">
         <swiper-item>
           <image src='{{item.url}}' mode='aspectFill'></image>
         </swiper-item>
       </block>
     </swiper>
  </view>

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

代码语言:javascript
复制
Page({
   data: {
inputValue: '', //搜索的内容
     //轮播图
     movies: [
       { url: '../../images/s1.jpg' },
       { url: '../../images/s2.jpg' },
       { url: '../../images/s3.jpg' },
       { url: '../../images/s4.jpg' }
     ],
}
}]

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

图3.1 效果图

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题描述
  • 解决方案
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档