垃圾回收分类查询平台微信小程序端（查询垃圾分类的小程序）

垃圾回收分类查询平台微信小程序端（查询垃圾分类的小程序）

写在前面

之前写的那个小程序索引列表bug确实很多 �。这次直接用的小程序自定义组件(component),总之还是官方的比较好用啊，虽然还是有些瑕疵，起码体验上是比以前的模板方式好太多了，引用也是很方便。更多细节请查看小程序自定义组件官方文档

使用前请先-代码

首项排列对比

目录说明

component 文件夹下 wx-index-list 是组件目录，有四个文件

component -- wx-index-list -- wx-index-list.js // 组件逻辑js文件，所需属性值这里是外部传入 -- wx-index-list.json // 组件json文件，注册该文件夹下一组文件 为 自定义组件 -- wx-index-list.wxml // 自定义组件的内部WXML结构 -- wx-index-list.wxss // 样式只应用于这个自定义组件

引用组件

配置json

// demo.json// 自定义组件引用方式{ "usingComponents": { "component-tag-name": "path/to/the/custom/component" }}// 本组件使用，复制下面代码到相应json文件下{ ... "usingComponents": { "list-html": "/component/wx-index-list/wx-index-list" } ...}

wxml使用

正确配置json后，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

属性说明

目前组件接收 两个参数，一个事件

属性

data [object] 组件需要的数据，这里是个json对象my-city [string] 是否开启我的定位 ，默认为不开启 ，需要传入城市名称。不写或者空，为不开启 config [object] 配置项 horizontal: 默认值 true, // 第一个选项是否横排显示（一般第一个数据选项为 热门城市，常用城市之类 ，开启看需求） animation: 默认值 true, // 过渡动画是否开启 search: 默认值 true, // 是否开启搜索 searchHeight: 默认值 45 // 搜索条高度 ，建议不要修改别的高度 suctionTop:默认值 true // 是否开启标题吸顶

事件

属性事件使用

// pages/demo/demo.js// 导入数据，可以ajax获取let City = require('../../utils/allcity.js');Page({ data: { city:City, config: { horizontal: false, // 第一个选项是否横排显示（一般第一个数据选项为 热门城市，常用城市之类 ，开启看需求） animation: false, // 过渡动画是否开启 search: false, // 是否开启搜索 searchHeight: 45, // 搜索条高度 suctionTop: false // 是否开启标题吸顶 } }, onLoad() { wx.showLoading({ title: '加载数据中...', }) // 模拟服务器请求异步加载数据 setTimeout(()=>{ this.setData({ city: CityÏ }) wx.hideLoading() },2000) }, binddetail(e){ console.log(e.detail) // 返回 例 :{name: "北京", key: "B", test: "testValue"} } })

数据格式

当前默认的数据来自组件内 allcity.js 模拟数据，

// /utils/allcity.js[{ title:"热门城市", item: [ { "name": "北京", "key": "热门", // 这里可以添加自定义字段 },{ "name": "上海", "key": "热门", // 这里可以添加自定义字段 }]},{ title:"B", item: [ { "name": "北京", "key": "B", // 这里可以添加自定义字段 },{ "name": "保定", "key": "B", // 这里可以添加自定义字段 }]}]

如果需要修改数据格式，需要去修改组件 相应的wxml 和 js 。如果没有特殊要求，请按照以上数据格式使用。

�本来城市索引列表也不是很难写的一个功能，这里写出来是为了给大家图省事，如有需要我会继续更新。如果有什么问题可以留言给我，我看到会给大家回复。 我建了一个 qq 群 ：166188735 ，感兴趣的同学可以加一下 ，可以一起讨论小程序，共同进步啊！然后就不要加私人微信了，突然发现加的人多了也有点苦恼啊 【手动笑脸】

更新日志

##v1.0.1 (2018-12-21更新)

1. 添加左右联动

2. 添加标题吸顶

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。