推荐下载
-
2020-05-12 浏览：797
-
2020-04-04 浏览：665
-
2020-05-06 浏览：578
-
2020-05-08 浏览：552
-
2020-04-28 浏览：550
微信小程序项目总结《三》阅读首页、阅读详情开发
发布时间:2020-11-25
第五章 阅读首页
在写这部分代码的时候，我用的是死数据，但后来发现数据填充的时候太凌乱，就模仿真实向服务器请求数据的模式，将所有数据提取到外面，用数据绑定的方式在逻辑层获取数据；其中用到了小程序的模板templete组件，以及wxml里运用if循环和理解相对路径、绝对路径的区别，还有swiper组件的运用，各种点击事件的处理和交互。
post.wxml
1
2
3
4
5
这里的就是一个滑块视图容器；而就是你希望滑动的东西，可以是文字也可以是image，其中swiper有很多属性。常用的有属性名 默认值 作用 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=http://www.yiyongtong.com/archives/"templateUrl" />标签。同样使用is属性来指向要引用的标签。 (5)要在index.wxml中使用template中定义的模板，则需要先在index中利用import来导入该模板。 (6)要注意import作用域，其仅仅引用目标文件中template。如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。 post-template.wxml 这个就是文章列表的template模板
post.js
