微信小程序项目总结《三》阅读首页、阅读详情开，微信 小程序完全禁用
来源：未知 浏览量：94次
第五章 阅读首页
在写这部分代码的时候我用的是死数据但后来发现数据填充的时候太凌乱SEO排名服务但后来发现数据填充的时候太凌乱就模仿真实向服务器请求数据的模式将所有数据提取到外面用数据绑定的方式在逻辑层获取数据；其中用到了小程序的模板templete组件以及wxml里运用if循环和理解相对路径、绝对路径的区别还有swiper组件的运用各种点击事件的处理和交互。
post.wxml
1.微信小程序中的swiper组件真的是简单方便提供了页面中图片文字等滑动的效果。
<swiper>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
</swiper>
1
3
4
属性名 默认值 作用 2.indicator-dots false 是否显示面板指示点 3.indicator-color rgba(0, 0, 0, .3) 指示点的颜色 4.indicator-active-color #000000 当前选中的指示点颜色 5.autoplay false 是否自动播放 6.intervaly 5000 自动切换时间间隔
这里vertical=”true”在官方文档中没有提到定义这个可以上下滑动；还有一点需要注意vertical=”false”时仍然是上下滑动原因就是微信小程序在解析时将”false”看成字符串只要字符串不为空就为真。所以我们需要这样写：vertical=”{{false}}” 2.在组件上使用wx:for控制属性绑定一个数组即可使用数组中各项的数据重复渲染该组件。(1)可以使用wx:for-item指定数组当前元素的变量名。(2)可以使用wx:for-index指定数组当前下标的变量名.(3)wx:for用在<blcok/>标签上以渲染一个包含多节点的结构块。 3.绝对路径是指文件在硬盘上真正存在的路径。所谓相对路径就是相对于自己的目标文件位置。相对路径使用“/”字符作为目录的分隔字符而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。 4、 Template模板 WXML提供模板（Template）可以在模板中定义代码片段然后在不同的地方使用。可以保证格式以及数据的相同。 (1)-定义模板 使用<template name="tempName"></template>标签定义模板并将模板名称命名为tempName赋值给属性name。在标签内部定义模板结构。 (2)-使用模板 使用<template is="tempName" />标签在需要使用模板的地方。如果要用到js文件中的数据则需要添加data属性。 (3)-is属性 is属性不仅可以静态的指向渲染的模板也可以使用Mustache语法来动态决定具体需要渲染哪个模板。 (4)-模板的引用 如上都是在同一个wxml文件中定义和引用模板而模板的定义和引用是可以分开的。即在一个文件中定义模板而在其他一个或多个文件wxml文件中都可以使用定义好的模板。从外部文件中引用模板使用<import src="templateUrl" />标签。同样使用is属性来指向要引用的标签。 (5)要在index.wxml中使用template中定义的模板则需要先在index中利用import来导入该模板。 (6)要注意import作用域其仅仅引用目标文件中template。如：C import BB import A在C中可以使用B定义的template在B中可以使用A定义的template但是C不能使用A定义的template。 post-template.wxml 这个就是文章列表的template模板 post.js