微信小程序（十二）实现首页左右上下滑动项目界面

截屏2021-05-16 19.06.22.png

1.API

4. 项目
4.1 项目分类

自行查询api

方法： GET
参数： 无

项目为包含一个分类，该接口返回整个分类。

[
    {
        "children": [],
        "courseId": 13, 
        "id": 294, // 该id在获取该分类下项目时需要用到
        "name": "完整项目", // 该分类名称
        "order": 145000,
        "parentChapterId": 293,
        "visible": 0
    }
]

4.2 项目列表数据
某一个分类下项目列表数据，分页展示

方法：GET
参数：
    cid 分类的id，上面项目分类接口
    页码：拼接在链接中，从1开始。

2.scroll-view

• • bindscrolltolower：滚动到底部/右边时触发。
• scroll-left：设置横向滚动条位置。类似scroll-into-view。

3.swiper

swiper

• current：当前所在滑块的 index。

• bindchange：current 改变时会触发 change 事件，event.detail = {current, source}

4.SelectorQuery

查询节点信息的对象。

4-1.wx.createSelectorQuery()

wx.createSelectorQuery

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。

4-2.SelectorQuery.select

在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。

4-3.SelectorQuery.selectAll

在当前页面下选择匹配选择器 selector 的所有节点。

4-4.NodesRef.boundingClientRect(function callback)

NodesRef.boundingClientRect

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。

function callback

回调函数，在执行 SelectorQuery.exec 方法后，节点信息会在 callback 中返回。

4-5.SelectorQuery.exec(function callback)

执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。