diff --git a/docs/index-list.md b/docs/index-list.md index db3d030..eb816bb 100644 --- a/docs/index-list.md +++ b/docs/index-list.md @@ -2,26 +2,32 @@ 索引列表组件,可实现类似通讯录效果。组件内节点将被添加到列表上方。 +列表支持多选。如果将```selecting```属性置为```true```,列表就会进入可选择状态,。如果将```selecting```属性置为```false```,列表就会退出可选择状态,同时发送```bindselect```事件。 + ## 属性列表 -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| ---------- | --------------- | ------ | ---- | ------------------------------------- | -| list | Array | [] | 是 | 列表数据 | -| vibrated | boolean | true | 否 | 索引上滑动时是否产生振动,仅 iOS 生效 | -| bindchoose | eventhandle | | 否 | 选择列表项, e.detail={name} | +| 属性 | 类型 | 默认值 | 必填 | 说明 | +| ---------- | ---------------- | ------ | ---- | --------------------------------------------------- | +| list | Array\ | [] | 是 | 列表数据 | +| vibrated | boolean | true | 否 | 索引上滑动时是否产生振动,仅 iOS 生效 | +| selecting | boolean | false | 否 | 列表是否为可选择状态 | +| bindchoose | eventhandle | | 否 | 单击列表项, e.detail={item:subItem} | +| bindselect | eventhandle | | 否 | 列表退出选择状态, e.detail={selected:Array\} | -### listItem 属性列表 +### listItem 对象的属性列表 -| 属性 | 类型 | 说明 | -| -------- | -------------- | ------------ | -| alpha | string | 首字母(大写) | -| subItems | Array | 子元素集合 | +| 属性 | 类型 | 说明 | +| -------- | --------------- | ------------ | +| alpha | string | 首字母(大写) | +| subItems | Array\ | 子元素集合 | -### subItem 属性列表 +### subItem 对象的属性列表 -| 属性 | 类型 | 说明 | -| ---- | ------ | ---- | -| name | string | 名称 | +| 属性 | 类型 | 必填 | 说明 | +| -------- | ------- | -- | ------------ | +| name | string | 是 | 名称 | +| selected | boolean | 否 | 是否已经被选择 | +| disabled | boolean | 否 | 是否可以被选择 | ### 注意事项 diff --git a/src/index-list/index.less b/src/index-list/index.less index 0f0267b..1fc8741 100644 --- a/src/index-list/index.less +++ b/src/index-list/index.less @@ -39,6 +39,15 @@ .index-group__item.thin-border-bottom:after{ left: 24rpx; } +.selected{ + color: #1aad19; +} +.disabled{ + color: rgba(0, 0, 0, 0.5); +} +.bg-highlight,.selected{ + background-color: #f2f2f2; +} .anchor-bar__wrp{ position: fixed; diff --git a/src/index-list/index.ts b/src/index-list/index.ts index 2b24318..cfe5ca2 100644 --- a/src/index-list/index.ts +++ b/src/index-list/index.ts @@ -48,7 +48,7 @@ Component({ observer: function(newVal) { if (newVal.length === 0) return const data: any = this.data - const alphabet = data.list.map(item => item.alpha) + const alphabet:Array = data.list.map(item => item.alpha) this.setData({ alphabet, current: alphabet[0] @@ -61,6 +61,17 @@ Component({ vibrated: { type: Boolean, value: true + }, + selecting: { + type: Boolean, + value: false, + observer: function (newVal:Boolean) { + if (newVal){ + this.data.selected = []; + }else{ + this.triggerEvent('select',{selected:this.data.selected}) + } + } } }, @@ -70,6 +81,7 @@ Component({ intoView: '', touching: false, alphabet: [], + selected: [], _tops: [], _anchorItemH: 0, _anchorItemW: 0, @@ -88,9 +100,19 @@ Component({ } }, methods: { - choose(e) { - const item = e.target.dataset.item - this.triggerEvent('choose', {item}) + choose(item:{item:subItem,selected:boolean}) { + //let item = e.target.dataset.item + let selected:Array = this.data.selected + const curItem = selected.findIndex((v)=> v.name==item.item.name) + + if(item.selected){ + selected.splice(curItem,1); + }else{ + if(curItem<0){ + selected.push(item.item); + } + } + this.triggerEvent('choose', {item:item.item}) }, scrollTo(e) { this.__scrollTo(e) @@ -158,3 +180,12 @@ Component({ } } }) + +interface subItem{ + name:string, + style:"selected"|"disabled"|"" +} +interface listItem{ + alpha:string, + subItems:Array +} \ No newline at end of file diff --git a/src/index-list/index.wxml b/src/index-list/index.wxml index 136f0ab..46bad4c 100644 --- a/src/index-list/index.wxml +++ b/src/index-list/index.wxml @@ -9,16 +9,19 @@ + {{item.alpha}} + bindtap="{{index.toggle}}"> {{subItem.name}} diff --git a/src/index-list/index.wxs b/src/index-list/index.wxs new file mode 100644 index 0000000..85632e8 --- /dev/null +++ b/src/index-list/index.wxs @@ -0,0 +1,34 @@ +module.exports.toggle =function (event,instance) { + //instance.getDataset().selecting&& + var dataset= event.target.dataset + var item = dataset.item + var curInst = event.instance + if(!item.disabled&&dataset.selecting){ + if(curInst.hasClass('selected')){ + curInst.removeClass('selected') + instance.callMethod('choose',{ + item:item, + selected:true + }); + }else{ + curInst.addClass('selected') + instance.callMethod('choose',{ + item:item, + selected:false + }); + } + } +} + +module.exports.init = function (newValue,oldValue,hostInst,inst) { + var item = inst.getDataset().item + if(item.disabled){ + inst.addClass('disabled') + }else{ + if(newValue&&item.selected){ + inst.addClass('selected') + }else{ + inst.removeClass('selected') + } + } +} \ No newline at end of file diff --git a/tools/demo/example/index-list/index-list.wxml b/tools/demo/example/index-list/index-list.wxml index 1621ff2..cd75899 100644 --- a/tools/demo/example/index-list/index-list.wxml +++ b/tools/demo/example/index-list/index-list.wxml @@ -1,11 +1,13 @@ - + Index List 类通讯录列表 + 可选择状态: + diff --git a/tools/demo/project.config.json b/tools/demo/project.config.json index aab1a17..8bd24b6 100644 --- a/tools/demo/project.config.json +++ b/tools/demo/project.config.json @@ -4,7 +4,6 @@ "ignore": [] }, "setting": { - "urlCheck": true, "es6": true, "postcss": true, "minified": true, @@ -13,7 +12,6 @@ }, "compileType": "miniprogram", "libVersion": "2.9.4", - "appid": "wxe0b5580bba739b69", "projectname": "小程序拓展组件库", "isGameTourist": false, "condition": {