uniapp小程序实现标签展开和收起

最新推荐文章于 2024-03-01 19:57:43 发布

console.log('D')

最新推荐文章于 2024-03-01 19:57:43 发布

阅读量1.5k

点赞数 1

分类专栏： vue uni 文章标签：前端

本文链接：https://blog.csdn.net/i_am_father_for_/article/details/125761500

版权

vue 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

uni

4 篇文章 0 订阅

订阅专栏

效果:

html:

     <!-- 常合作科室 -->
     <view class="department-title fr_c">
          <view class="title-line"></view>
              常合作科室
          </view>
          <view class="department-content fr_c">
             <view class="content-tag" :data-name="item" v-for="(item, index) in viewDepartmentsTags" :key="index">
                 {{ item }}
             </view>

             <view class="content-departmentMore fr_c" v-show="isShowTag == 1" @click="isShowDepartmentTag('open')">
                 <view class="departmentMore-text">更多</view>
             </view>
             <view class="content-departmentPut fr_c" v-show="isShowTag == 2" @click="isShowDepartmentTag('put')">
                 <view class="departmentPut-text">收起</view>
             </view>
     </view>

js:

    mounted() {
        this.maxheight(".content-productText", 76);
        this.maxheight(".content-brandText", 76);
        this.getDepartmentsTagData(); //获取合作科室标签数据
    }
    methods:{
        //获取常合作科室tag数据
        getDepartmentsTagData() {
            this.departmentsTags = this.departments;
            this.viewDepartmentsTags = this.departmentsTags; // -
            this.$nextTick(() => {
                setTimeout(() => {
                    this.setDepartmentsTags();
                }, 0);
            });
        },
        //设置tag显示方式
        setDepartmentsTags() {
            // 定义一个二维数组判断标签行数
            let departmentsTagsArr = [];
            let departmentsTagsArrIndex = -1;

            const query = uni.createSelectorQuery().in(this);
            const contentDom = query.select(".department-content");
            const tagDoms = query.selectAll(".content-tag"); // 每个tag标签dom实例
            const departmentMoreDom = query.select(".content-departmentMore"); // 展开按钮dom

            // 获取每个标签对象信息
            tagDoms.fields({ rect: true, dataset: true }).exec(data => {
                // 获取第一行第一个标签的左侧距离
                const oneTagLeft = data[0][0].left;
                data[0].forEach(item => {
                    if (item.left == oneTagLeft) {
                        departmentsTagsArrIndex++;
                        departmentsTagsArr[departmentsTagsArrIndex] = [];
                    }
                    departmentsTagsArr[departmentsTagsArrIndex].push(item);
                });
                //获取外层包含tag标签的dom的宽度
                contentDom.fields({ size: true }).exec(contentDom => {
                    const contentDomWidth = contentDom[1].width;
                    //行数大于1
                    if (departmentsTagsArr.length > 1) {
                        //显示展开按钮
                        this.isShowTag = 1;
                        this.$nextTick(() => {
                            //获取展开按钮节点的宽度
                            departmentMoreDom.fields({ size: true }).exec(moreDomData => {
                                //过滤出没有超出第一行的所有tag标签
                                const fliterNoExceedingOnelineTags = departmentsTagsArr[0].filter(item => {
                                    return item.right + moreDomData[2].width <= contentDomWidth;
                                });
                                //切割并保存--标签收起时要用
                                this.onelineTag = this.departmentsTags.slice(0, fliterNoExceedingOnelineTags.length);
                                this.viewDepartmentsTags = this.onelineTag;
                            });
                        });
                    } else {
                        //不显示展开/收起按钮
                        this.isShowTag = 0;
                    }
                });
            });
        },
        //展开全部常合作科室标签
        isShowDepartmentTag(type) {
            if (type == "open") {
                this.isShowTag = 2;
                this.viewDepartmentsTags = this.departmentsTags;
            } else {
                this.isShowTag = 1;
                this.viewDepartmentsTags = this.onelineTag;
            }
        },
}