收藏
评论

横向筛选不定子集深度尽量少布局重绘解决方案


// helper.js

helper.getPageStorageData=function(page){

    return {

        page:page,

        pageStorage: page.storage || (page.storage = {}),

        pageData: page.data || (page.data = {}),

        queryParameters:page.options

    }

};

let basePage;

helper.getBasePage = function() {

    return basePage ? basePage : basePage = require('./basePage.js');

}

helper.Page = function(...args) {

    args.unshift({}, this.getBasePage());

    const pageMember = Object.assign(...args)

    return [pageMember, Page(pageMember)];

}

// selectionSearch.js

const { helper, va, webApi } = global;

helper.Page({

    storage: {},

    onLoad:function(){

        const searchSelectionsMap={

            "s": {

                classify: "s",

                tags: [

                    { id: "tag0", value: "tag0", subId: "" },

                    { id: "tag1", value: "tag1",subId:"sub1"},

                    { id: "tag2", value: "tag2", subId: "sub2" },

                    { id: "tag1", value: "tag1", subId: "sub1" },

                    { id: "tag2", value: "tag2", subId: "sub2" },

                    { id: "tag2", value: "tag2", subId: "sub2" },

                    { id: "tag2", value: "tag2", subId: "sub2" },

                    { id: "tag2", value: "tag2", subId: "sub2" },

                    { id: "tag2", value: "tag2", subId: "sub2" },

                ]

            },

            "sub1": {

                classify: "sub1",

                tags: [

                    { id: "tag1.1", value: "tag1.1", subId: "sub1.1"},

                    { id: "tag1.2", value: "tag1.2", subId: "sub1.2" }

                ]

            },

            "sub1.1": {

                classify: "sub1.1",

                tags: [

                    { id: "tag1.1.1", value: "tag1.1.1" },

                    { id: "tag1.1.2", value: "tag1.1.2" }

                ]

            },

            "sub1.2": {

                classify: "sub1.2",

                tags: [

                    { id: "tag1.2.1", value: "tag1.2.1" },

                    { id: "tag1.2.2", value: "tag1.2.2" }

                ]

            },

            "sub2": {

                classify: "sub2",

                tags: [

                    { id: "tag2.1", value: "tag2.1" },

                    { id: "tag2.2", value: "tag2.2" }

                ]

            },


        }

        const searchSelections=[

            {

                group:[

                    searchSelectionsMap["s"]

                ]

            }

        ];

        this.storage.searchSelectionsMap = searchSelectionsMap;

        this.setData({ searchSelections: searchSelections})

    },

    onSelectionTagTap:function(e){

        const data = e.currentTarget.dataset;

        const {page, pageData, pageStorage} = helper.getPageStorageData(this);

        const searchSelections = pageData.searchSelections, searchSelectionsMap = pageStorage.searchSelectionsMap;

        const { value, subId, classify, groupIndex, selectionIndex, index } =data;

        const selection = searchSelections[selectionIndex];

        const item=selection.group[groupIndex];

        item.selectedIndex = item.selectedIndex||0;

        if (item.selectedIndex===index){return}

        item.selectedIndex=index;

        const groupPath = `searchSelections[${selectionIndex}].group`;

        const selectedIndexPath = `${groupPath}[${groupIndex}].selectedIndex`;

        const updateData = {

            [selectedIndexPath]: index

        }

        let nextGroupIndex = groupIndex;

        void function addSub(subId){

            const sub = subId && searchSelectionsMap[subId];

            if (sub) {

                sub.selectedIndex = 0;

                updateData[`${groupPath}[${++nextGroupIndex}]`] = sub;

                const tags = sub.tags[0];

                addSub(tags&&tags.subId)

            }

        }(subId);

        const group = searchSelections[selectionIndex].group;

        if(group.length >= ++nextGroupIndex){

            for (let i = nextGroupIndex; i < group.length;i++){

                if (group[i]){

                    updateData[`${groupPath}[${i}]`] = null;

                }

            }

        }

        this.setData(updateData);

        group.splice(nextGroupIndex);

    }

})

<!--selectionSearch.wxml-->


    <view wx:for="{{searchSelections}}" wx:key="itemIndex" wx:for-index="selectionIndex" class='selection-item'  >

        <view wx:for="{{item.group}}" wx:key="groupIndex" wx:for-index="groupIndex" class='selection-tags {{item.isHide?"hide":""}} {{item.isSub?"sub-tags":""}}'>

            <view wx:for="{{item.tags}}" wx:key="index" wx:for-item="tag" catchtap='onSelectionTagTap' class="selection-tag {{(item.selectedIndex||0) === index?'selected':''}}" data-group-index="{{groupIndex}}" data-selection-index="{{selectionIndex}}" data-index="{{index}}" data-sub-id="{{tag.subId||''}}" data-classify="{{item.classify}}" data-value="{{tag.value}}">{{tag.text||tag.value}}</view>

        </view>

    </view>


/* selectionSearch.wxss */


.selection-tags{

    display: flex;

    white-space: nowrap;

    margin: 5px;

    overflow-x: auto;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

}

.selection-tags::-webkit-scrollbar{

    display: none;

}

.selection-tag{

    padding: 0 10px;

    margin: 0 5px;

}

.selection-tag.selected{

    background: red;

    border-radius: 50px;

    color: #FFFFFF;

}


最后一次编辑于  2018-09-03  (未经腾讯允许,不得转载)
复制链接收藏赞 0