微信小程序会话列表怎么制作

微信小程序会话列表怎么制作 : ？

1. 创建一个小程序项目，使用微信开发者工具。

2. 在app.json中添加pages字段，将会话列表页面的路径添加进去。

3. 在会话列表页面的js文件中，定义一个变量来存储会话列表的数据，并在onLoad函数中调用wx.request()接口获取数据。

4. 在会话列表页面的wxml文件中，使用wx:for指令遍历会话列表的数据，将数据渲染到页面上。

5. 在会话列表页面的wxss文件中，定义会话列表的样式。

实现效果如下：

实现左右联动的菜单列表，主要依靠scroll-view的是三个属性：

scroll-top：设置竖向滚动条位置（可视区域最顶部到scroll-view顶部的距离）；

scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素；

bindscroll：滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

结构图示：

wxml:

js:

数据结构：

如果你还想实现从其他页面，点击按钮跳转到当前页面，并且列表滚动到指定项，此项在可视区域的第一个展示：

wxss:

众多类似商城项目中，都会有列表分类标签随着界面滚动吸顶的效果

APP中实现相关功能很容易，h5也可以动态 *** 作DOM来设置

微信小程序没有DOM，该怎么实现呢？

其实这个场景还是比较简单的，正常情况下导航标签是在列表中间的，滑到顶部时吸顶，再拉下来时又回到原来的位置

根据场景，有两个参考思路：

1、顶部定位一个常在的同样的导航标签，通过页面的 scrollOffset 来控制显隐即可

2、通过动态添加 fixed 样式，来动态改变标签在页面中的位置

ps：不过第二种思路会有一个缺陷就是切换位置时页面会因为少了一部分而上移，所以还是需要补白，所以还是用第一种思路

我这里是用了自定义导航栏的，所以实现上会有所不同，如果是用系统导航栏可以稍微调整一下，因为偏移量会有所区别

CSS部分

JS部分

其中 CacheUtil.naviStatuHeight 这个是我应用启动时获取的导航+状态栏高度，X和其他机型还是有所区别，如果是系统导航栏的话这些相关逻辑都可以省略

这里为什么用navigator而不用view呢？

因为navigator是原生组件，可以在最上层，因为有可能列表内容有原生组件的话滑动就会有问题，所以navigator在不设置url的情况下和view的效果差不多，故采用navigator

cover-view：bug: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示，而且使用的版本限制也很多，所以就不考虑

---