• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序通过template模块和components组件简化列表开发

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

作为重要的UI组件——ListView,微信小程序中,列表的实现操作总会让相应页面中的代码显得臃肿,特别是当需要上拉刷新、下拉加载、多选操作的时候。
我开始学小程序的时候,经常会为完成一个列表而花费较多时间。后面实在受不了了,就使用了自定义组件对列表的代码就行封装。下面就是我封装完成的list组件目录。

怎么让一个组件重复列出相同的view,这个困扰了我一段时间,直到后面我在官网里面找到了template。
在for结构中将template的内容循环显示出来,这样就能达到列表显示效果。
(这里is属性用来区分子条目的类型,data属性是传进子条目的数据)

要怎么把每个条目的内容指定到对应的组件中?这还是template的内容。
我定义了list_item.wxml,并把它包含到list.xml中。

list_item.xml文件是用来存放想让列表显示的对应条目,里面放了components组件。这样每个条目的逻辑处理一般不需要在list的js文件中完成,这就分摊了list中的代码。
(这里name对应前面wxml文件中is属性的内容,this-data对应data属性中的内容)

当然,上面存放的组件还得在json文件中注册一下,下面就是我在一个项目中list组件需要注册的组件。

实现步骤基本就这样了,是不是觉得很简单。
上面的代码在项目中能发挥什么作用呢。我认为最大的优点就是简化了代码。下面是我在一个页面的Fragment中写的wxml代码,是不是觉得很简洁。而且在js文件中,由于很多逻辑分摊到了pass-list中,js里面的代码也非常简单。

当然,这还不是最重要的,如上面所说,将上拉属性,下拉加载,多选操作,左滑右滑等等很多逻辑处理都可以放到里面,这就能把它封装成一个强大的list组件。

文章到此结束,可能讲的比较模糊,但还是希望读这篇文章的人能有所收获。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap