先看一下实现效果：
上面一个导航栏，有文字，接着一个swiper轮播。
文章列表：作者头像，时间，标题，引导图，内容概要，查看数，收藏数。
新建一个post页面，就像新建启动页面welcome一样，在pages文件夹下面新建一个文件夹posts，然后文件posts里面新建post.js , post.wxml , post.wxss 。 就像启动页面一样，要正确显示页面，可以先在post.wxml里面输入要给<text>post</text>，要正确显示首先要注册，在配置文件app.js里面，输入正确的文件路径pages/[posts/post，“pages”:[ ] 里面第一个就是启动时候的页面，所以比如把post页面放在第一位，就可以启动显示该页面。每新建一个页面都需要在pages下面注册一下。
知识点2、Swiper如何使用
看示例的用法，首先是标签swiper，然后里面是子标签项swiper-item，子标签项里面可以放自己想要放的东西比如文字或者image。不限定是图片。
先做一下测试：在post.wxml里面写上view，包裹swiper，包裹3个轮播图图片swiper-item。ctrl+s 没有反应的话，手动点一下编译。包裹image标签。设置图片路径后，再设置图片样式。图片宽750rpx，高500rpx之后，高度只显示了一半。说明包裹框高度小了，设置swiper-item高度为500rpx，没有反应，设置swiper为500rpx，正确显示了。由此可以知道。轮播图组件的高宽必须设置在swiper根节点上。swiper-item作为子元素，默认的就是swiper的高宽。
知识点3、Swiper高宽设置问题
从上面用法可以看出来，对于高度设置问题，首先我们来设置图片高度，宽度750rpx。但是高度没有撑开，所以可以知道，外面swiper-item或者swiper默认了大小，框住了高度，先设定swiper-item，没有效果，然后设置swiper，效果就正常了，故，知道swiper限制了高度。当swiper高度修改后，如果去掉image高度样式，依然出问题，image不是继承swiper-item的高宽，所以关于轮播图组件swiper我们可以知道，swiper限制外围的固定大小，然后在里面设置image的大小，只是起了容器作用，重点是看你放的什么元素。所以完全可以利用这个swiper去实现自己不同的业务。
高宽自动100%，所以继承父级的高宽。
知识点4、Swiper-item容器。这里面swiper-item就是一个容器，可以用来包裹没有轮播图项目，而且不仅仅限定于图片。
同理添加其他图片，让其轮播。将相关的样式写在post.wxss里面。小程序里面也可以支持less和sass。但是预编译的扩展名是wxss的。否则不能正常运行。 手动改后缀文件类型就可以了。但是css是识别不了的。
知识点5、添加指示点。
indicator-dots Boolean false 是否显示面板指示点 。通过上面代码可以看出，指示点indicator-dots 是swiper的一个属性，可以设置为true，true需要添加引号。其他属性，比如autoplay 自动切换，以及指示点的颜色和当前选项的颜色，自动轮换的速度。
面对新鲜的技术，没有学习资料的时候，第一，看api文档，第二，试
也可以垂直滚动，后面示例设置vertical=“true”。
今天尝试着做小程序，官方demo报错，出现脚本错误或者未正确调用 Page()
摸索半天 解决办法
page 编译错误出现脚本错误或者未正确调用Page()
解决办法
//在页面当中的.js文件里面加上
Page({
})
网友评论