如何使用微信小程序设计和设置表格并展示数据?

如何使用微信小程序设计和设置表格并展示数据?,第1张

1、双击打开微信小程序开发工具,新建一个对应的界面,然后插入多个view元素,并添加class属性,如下图所示:

2、没有给这些view样式,然后保存代码并预览效果,结果出现从上到下排列,如下图所示:

3、在对应的wxss文件中,设置表格的表头和表体的样式,如下图所示:

4、再次保存代码并在模拟器中预览效果,发现形成了表格,如下图所示:

5、在thtd添加一个border-bottom属性,设置底部边框属性,如下图所示:

6、结果发现最后一行的底部边框展示的有点粗,是因为table和td设置了边框,加粗了,如下图所示:

在浏览器端开发时,经常会有这种情况:单击某个元素,让其高亮显示,例如下图

这个用 js 很容易实现, 因为单击事件触发时,函数传入的 event 事件包含 target 对象,里面会有触发事件的 DOM 元素,我们只需要 *** 作这个 DOM 元素,为其添加 class 名就好了。

而在微信小程序开发时,由于其类似于 vue 不建议直接 *** 作 DOM (两者都有API可以做到),事件触发的时候同样会有默认参数传入, 但是无法直接取到 DOM 节点本身,而是包含挂载的一些数据,和点击部位的坐标信息等,具体参阅官方文档 《事件·小程序》 , this 也总是指向 Page ,所以我们就需要 通过数据间接 *** 纵 DOM 来实现。

例如我遇到的问题是,我想做一个月历,当你选中某一天的时候,那一天高亮显示。

由于自己在做这一块时遇到了很多这方面的困惑,所以我在网上看了一些解决方案,下面列举一种在 CSDN 上看到的方案 :

这个方法绑定了一个动态的 class 名,用一个变量 _num 可以做到切换 class 的作用,当点击元素时,js 获取到节点上 data-num 上的值,这里将值赋给变量 _num ,相应的由于是数据驱动,节点上的 class 名经过计算变化为 cur ,其他的同理。

在没有搞清这个方法前,我制作月历是使用的条件渲染。具体做法是,每个日期节点准备两个 DOM 元素,一个带有 class="selected" ,一个没有, 经过列表渲染之后每个单位实际上存在两个逻辑上的元素,这个时候通过点击改变 Page 中 data 里面的 selectedDate 和 selectedDate ,进一步控制 wx:if 的条件来实现元素的渲染与否。

点击事件发生时,获取节点中的 data-month 和 data-date 值, 并赋给 selectedDate 和 selectedDate

由于每个月都有某些日期, 所以加个月份限制 ,这里我设置了只做从这个月到未来6个月的月历,所以不需要加年份限制。

深知这个方案问题很大,是这一类的MVVM框架因的条件渲染切换消耗较大,微信小程序开发文档中介绍了 wx:if 相关 :

当用户点击某个日期的时候会重新渲染整个 DOM ,所以这个方案并不好。

搞懂前面的逻辑,再来看这个方案就会很明白了。


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

原文地址: http://outofmemory.cn/bake/11646782.html

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

发表评论

登录后才能评论

评论列表(0条)

保存