参考教材:《微信小程序开发入门与实践》 雷磊
前置知识:JavaScript,CSS
为了更好的学习后续知识,先来新建一个页面。(以下代码来自《微信小程序开发入门与实践》,下载地址:https://pan.baidu.com/s/1cxQXie, 源代码和图片资源在里面都可以找到)
我们先新建一个post界面,并作为首页,用到图片资源如resource
目录所示
![]() |
![]() |
并修改其中的post.wxml和post.wxss
post.wxml代码如下:
其中< swiper >是滑块视图容器, 这里用来实现轮播图的效果,具体用法说明请查看官方api https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<!--pages/post/post.wxml-->
<view>
<swiper indicator-dots="true" autoplay="true" interval="5000" circular="true">
<swiper-item>
<image src="../resource/post-1@text.jpg"/>
</swiper-item>
<swiper-item>
<image src="../resource/post-2@text.jpg" />
</swiper-item>
<swiper-item>
<image src="../resource/post-3@text.jpg"/>
</swiper-item>
</swiper>
<view class="post-container">
<view class="post-author-date">
<image src="../resource/my.jpg" />
<text>2018.1.31</text>
</view>
<text class="post-title">小时候的冰棍儿与雪糕</text>
<image class="post-image" src="../resource/post-4.jpg" mode="aspectFill" />