微信小程序中实现文字展开收起效果

最新推荐文章于 2024-08-28 00:12:21 发布

Isleta_

最新推荐文章于 2024-08-28 00:12:21 发布

阅读量815

点赞数

分类专栏： methods

本文链接：https://blog.csdn.net/Isleta_/article/details/89406482

版权

methods 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

图片效果

总体的样子

html代码

<view class="body">
        <view class="section">
            <view class="col-body" wx:for="{{caseData}}" wx:key="index" >
                <view class="col-bg"></view>
                <view wx:for="{{caseData[index]}}" wx:key="key" wx:for-index="selfKey" wx:for-item="selfValue">
                    <view class="col-group" wx:if="{{showContent == index}}" >
                    
                        <view class="col-title" wx:if="{{selfValue.key=='检查全球唯一标识'}}">查看CT</view>
                        <view class="col-title" wx:else>{{selfValue.key}}</view>
                        <view class="col-desc" bindtap="goCt" data-id="{{selfValue.value}}" wx:if="{{selfValue.key=='检查全球唯一标识'}}">
                            <view class="btn" style="border:1rpx solid #DA4F50;color:#DA4F50;border-radius:60rpx;padding:14rpx 28rpx;display:inline-block;">点击查看</view>
                        </view>
                        **<view class="col-desc {{selfValue.isShow ?'show':'unShow'}}" wx:else>
                            {{selfValue.value}}
                            <view class="col-button "  style='margin-right:10rpx;width:85rpx;' bindtap='changeWord' data-selfvalue="{{selfValue}}" data-index="{{index}}" data-selfkey="{{selfKey}}" wx:if='{{selfValue.value.length > 30}}'>
                                {{selfValue.isShow ?'收起':'展开'}}
                            </view>
                        </view>**
                        
                    </view>
                </view>
            </view>
            <view class="section-block"></view>
        </view>
    </view>

css代码

 .col-desc {
                font-size: $a7;
                color: $c2;
                line-height: 1.5;
                display: inline-block;
                background: #FFFFFF;
                padding-top: 30rpx;
                padding-bottom: 30rpx;
                width: 355rpx;
                word-break: break-all;
                padding-left: 40rpx;
                &.unShow{
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                   
                }
    }

js代码

Page({
    data: {
        caseData: [],
        caseList: [],
        secondCaseList: [],
        showContent: 0,
        nickname: '',
        ctUrl: '',
        word:'展开',
        isShow:'false'
    },
    changeWord:function(e){
        let selfkey = e.currentTarget.dataset.selfkey
        let index = e.currentTarget.dataset.index
        let word = this.data.word;
        if(typeof this.data.caseData[index][selfkey].isShow == 'undefined')
            this.data.caseData[index][selfkey].isShow = false
        this.setData({
            [`caseData[${index}][${selfkey}].isShow`]:!this.data.caseData[index][selfkey].isShow
        })
    }

只是部分片段，大概的逻辑都已经呈现了，判断要点击的哪个内容的点击按钮是通过双重的条件进行的判断。