微信小程序云所有页面信息展示怎么设置

微信小程序云所有页面信息展示怎么设置,第1张

我们可以使用微信小程序的模板语法来实现页面信息的展示。在页面的json文件里,需要添加一个“pages”字段,这个字段是一个数组,其中每一个元素都可以是一个页面的路径或者一个页面配置的对象。然后在页面的wxml文件里,可以使用微信小程序的模板语法来实现页面信息的展示,如列表渲染、条件渲染等。具体的实现方式可以参考微信小程序的官方文档。

微信小程序的页面加载事件说明:具体参考 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

当页面数据主要是列表时,onLoad、onPullDownRefresh、onReachBottom三个函数都涉及到获取数据列表。

考虑的出发点是能否用一致的方案兼容三种需求~~

做过一个小程序后的经验总结

如果涉及到不同的tab展示不同属性的数据,需要在切换tab时把dataList置空,然后获取数据的where逻辑要稍作修改,以便匹配不同的tab

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

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 不显示,而且使用的版本限制也很多,所以就不考虑


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/11294035.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-15
下一篇2023-05-15

发表评论

登录后才能评论

评论列表(0条)

    保存