《微信小程序程序设计与开发》课件 第二章 文章列表页面(任务式方式).pptxVIP

第二章主讲人：XX文章列表页面

本章目标使用swiper和swiper-items实现文章页面轮播理解.js文件的代码结构与page页面的生命周期掌握微信小程序数据绑定与setData函数(Mustache语法)掌握微信小程序事件与事件冒泡掌握微信小程序路由机制

任务一：用swiper组件实现文章轮播

一、用swiper组件实现文章轮播小米商城首页的Banner轮播图不管PC网站还是WebApp首页轮播图功能很常用，微信小程序的API提供已经封装好的组件swiper，使用起来非常方便。 swiper组件是小程序提供的滑动视图容器,它需要放置swiper-item组件配置使用，同时，需要注意的是，swiper组件的直接子元素只可以使swiper-item，如果放置其他组件，则被自动删除。但swiper-item下是可以放置其他组件或者元素的。

一、用swiper组件实现文章轮播文章页面轮播最终实现效果实现步骤：第一步：创建文章列表页面。第二步：使用swiper组件和swiper-item组件构建页面内容，并设置页面样式。设置swiper属性。第三步：设置swiper属性。

操作步骤一：创建文章列表页面1、在pages目录创建一个名为posts页面，然后通过微信开发工具创建页面所需要4个文件；2、把app.json的pages数组关于posts页面调整到pages数组的第一个元素pages:[pages/posts/posts,pages/welcome/welcome,pages/index/index]

操作步骤二：构建页面内容，并设置页面样式viewswiperswiper-itemimagesrc=/images/posts/post-1.png/image/swiper-itemswiper-itemimagesrc=/images/posts/post-2.png/image/swiper-itemswiper-itemimagesrc=/images/posts/post-3.png/image/swiper-item/swiper/viewposts页面代码/*设置swiper的样式*/swiper{width:100%;height:460rpx;}/*设置swiper-item中image组件的样式*/swiperimage{width:100%;height:460rpx;}posts样式代码运行效果

操作步骤三：设置swiper属性indicator-dotsBoolean类型。用来指定是否显示面板指示点，默认值为false。indicator-colorcolor类型。用来指定显示面板颜色，默认值为rgba(0,0,0,.3)。indicator-active-colorcolor类型。用来指定当前选中的指示点颜色，默认值#000000autoplayBoolean类型。用来指定是否自动播放，默认值为falseIntervalNumber类型。用来设置swiper-item的自动切换时间间隔,默认值为5000毫秒。CircularBoolean类型。用来指定是否循环轮播滚动，默认值为false。viewswiperindicator-dots=trueindicator-active-color=#fffindicatorautoplay=trueinterval=5000circular=trueswiper-itemimagesrc=/images/posts/post-1@text.jpg/image/swiper-itemswiper-itemimagesrc=/images/posts/post-2@text.jpg/image/swiper-itemswiper-itemimagesrc=/images/posts/post-3@text.jpg/image/swiper-item/swiper/view运行效果运行效果

Boolean值的陷阱小程序组件中Boolean类型的属性并不是Boolean类型，而是一个字符串类型，程序在执行读取这个内容使用JavaScript语言进行读取都会认为这是一个true。所以，设置indicator-dots=”false”属性运行效果跟我们预期效果不一样。在这里我们设置Boolean类型属性false，有以下几种方式：?不加入indicator-dot