zhaoxiaohai 2 роки тому
батько
коміт
ba38ad9876

+ 103 - 0
components/My_categoryListings/index.js

@@ -0,0 +1,103 @@
+// components/My_categoryListings/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        height: {
+            type: String,
+            value: '500'
+        },
+        list: {
+            type: Array,
+            value: []
+        }
+    },
+    options: {
+        addGlobalClass: true
+    },
+    lifetimes: {
+        ready() {
+            /*    setTimeout(() => {
+                   this.setData({
+                       intoViewId: 'basic1'
+                   })
+               }, 1000) */
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        result: ['a', 'b'],
+        leftIntoViewId: null,
+        rightIntoViewId: null,
+        heightList: [],
+    },
+
+    observers: {
+        'list': function (list) {
+            if (!list.length) return;
+            if (this.data.intoViewId == null) this.setData({
+                leftIntoViewId: list[0].system + list[0].systemid,
+                rightIntoViewId: list[0].system + list[0].systemid
+            })
+            setTimeout(() => {
+                this.getAppsHeight(list);
+
+            }, 500)
+        }
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        /* 点击左侧分类 */
+        changeType(e) {
+            this.setData({
+                leftIntoViewId: e.target.id,
+                rightIntoViewId: e.target.id
+            })
+        },
+        getAppsHeight(list) {
+            let heightList = [];
+            for (let i = 0; i < list.length; i++) {
+                let cas = '.' + list[i].system + list[i].systemid;
+                let query = wx.createSelectorQuery().in(this).select(cas).boundingClientRect();
+                query.exec(res => {
+                    if (!res[0]) return this.getAppsHeight(list);
+                    heightList.push(res[0])
+                    if (heightList.length == list.length) this.setData({
+                        heightList
+                    })
+                })
+            }
+        },
+        viewScroll({
+            detail
+        }) {
+            let arr = this.data.heightList, //获取元素信息
+                id = this.data.leftIntoViewId, //获取当前左侧栏选项
+                i = arr.findIndex(v => v.id == id), //选项当前在数组中的索引号
+                scrollTop = detail.scrollTop,
+                //判断当前索引是不是数组最后一条数据,不是的话拿下一个索引的距顶距离
+                top = (i + 1 == arr.length) ? arr[i].top - 15 - arr[i].height : arr[i + 1].top - 15 - arr[i + 1].height;
+            if (scrollTop >= top) {
+                if (!arr[i + 1]) return;
+                if (id == arr[i + 1].id) return;
+                this.setData({
+                    leftIntoViewId: arr[i + 1].id
+                })
+            } else if (scrollTop < top) {
+                if (!arr[i - 1] || id == arr[0].id) return;
+                if (scrollTop < Math.abs((arr[i - 1].top - 15 - arr[i - 1].height) / 2)) this.setData({
+                    leftIntoViewId: arr[i - 1].id
+                })
+            } else {
+                if (id == arr[1].id) return; //排除第一个
+            }
+        },
+    }
+})

+ 7 - 0
components/My_categoryListings/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-checkbox": "@vant/weapp/checkbox/index",
+        "van-checkbox-group": "@vant/weapp/checkbox-group/index"
+    }
+}

+ 84 - 0
components/My_categoryListings/index.scss

@@ -0,0 +1,84 @@
+.word {
+    display: flex;
+    width: 750rpx;
+    overflow: hidden;
+
+    /* 左边滚动区域 */
+    .left-list {
+        width: 100%;
+        width: 180rpx;
+
+        .option {
+            position: relative;
+            width: 180rpx;
+            height: 90rpx;
+            line-height: 90rpx;
+            text-align: center;
+            font-size: 28rpx;
+            font-family: PingFang SC-Regular, PingFang SC;
+            color: #333333;
+            padding-left: 10rpx;
+            padding-right: 4rpx;
+            box-sizing: border-box;
+        }
+
+        .current {
+            color: var(--assist) !important;
+        }
+
+        .current::after {
+            content: '';
+            position: absolute;
+            display: block;
+            height: 90rpx;
+            width: 8rpx;
+            background: var(--assist);
+            left: 0;
+            top: 0;
+        }
+    }
+
+    .right-list {
+        flex: 1;
+
+        .group {
+            background-color: #fff;
+            padding-left: 30rpx;
+            box-sizing: border-box;
+            padding-bottom: 20rpx;
+            margin-bottom: 20rpx;
+
+            .label {
+                display: flex;
+                align-items: center;
+                height: 90rpx;
+                border-top: 1rpx solid #EEEEEE;
+                margin-top: 28rpx;
+                margin-bottom: -20rpx;
+
+                .label-text {
+                    font-family: PingFang SC-Regular, PingFang SC;
+                    color: #333333 !important;
+                }
+            }
+
+            .label:first-child {
+                border-top: none;
+                margin-top: 0rpx;
+            }
+
+            .custom-checkbox {
+                float: left;
+                margin-top: 20rpx;
+                width: 50% !important;
+            }
+
+            .label-text {
+                padding-left: 10rpx;
+                font-size: 28rpx;
+                font-family: PingFang SC-Medium, PingFang SC;
+                color: #666666;
+            }
+        }
+    }
+}

+ 27 - 0
components/My_categoryListings/index.wxml

@@ -0,0 +1,27 @@
+<view class="word">
+
+    <scroll-view class="left-list" scroll-into-view='{{leftIntoViewId}}' scroll-with-animation scroll-y style="height: {{height}}rpx;">
+        <view class="option line-1 {{leftIntoViewId==item.system+item.systemid?'current':''}}" wx:for="{{list}}" id="{{item.system+item.systemid}}" bindtap="changeType">
+            {{item.systemname}}
+        </view>
+    </scroll-view>
+
+    <scroll-view class="right-list" bindscroll='viewScroll' scroll-into-view='{{rightIntoViewId}}' scroll-with-animation scroll-y style="height: {{height}}rpx;">
+        <view class="group {{item.system+item.systemid}}" wx:for="{{list}}" id="{{item.system+item.systemid}}">
+            <block wx:for="{{item.clients}}" wx:for-item="item2">
+                <block wx:for="{{item2.modules}}" wx:for-item="item3">
+                    <view class="label">
+                        <van-checkbox icon-size='28rpx' label-class='label-text' shape='square' name="a">{{item3.systemmodulename}}-{{item2.systemclientname}}</van-checkbox>
+                    </view>
+                    <van-checkbox-group value="{{ result }}" bind:change="onChange">
+                        <van-checkbox wx:for="{{item3.apps}}" wx:for-item="item4" icon-size='28rpx' custom-class='custom-checkbox ' label-class='label-text' shape='square' name="{{item4.systemappid}}">{{item4.systemappname}}</van-checkbox>
+                    </van-checkbox-group>
+                    <view style="clear:both" />
+                </block>
+            </block>
+        </view>
+        <view style="height: {{height-80}}rpx;" />
+        <view style="height: {{height-80}}rpx;" />
+    </scroll-view>
+</view>
+<!-- <My_empty wx:if="{{list.length==0}}" /> -->