微信小程序用js控制类名的切换用于改变不同的样式

曾经终败给现在 2022-04-10 08:23 581阅读 0赞

有时候，界面文字可能会很多，我们一开始设计界面的时候一定希望让他展示出来几行就行了，如果用户需要查看隐藏的部分，点击展开详情就能把剩余的内容显示出来。

## 方法可能有些不好，但是实现功能了，有更好的方法可以一起交流哦 ##

## 配图解释 ##

设计样式：  
![在这里插入图片描述][20190101085205670.png]  
展开样式  
![在这里插入图片描述][20190101085221105.png]  
test.wxml

<view class='writ' wx:for="{
       {writ}}">//从js里面引入数据
      <view class='{
       {className}}'>//从js哪里获取类名，这里可以获取两个类名，一个控制的展开样式，一个控制的还原样式
        <text>
       		 {
       {item.text}}
        </text>
      </view>
      
    </view>
    <view class='open '>
        <text bindtap='onopen'>展开详情>></text>//绑定点击事件，用于切换不同样式（也就是切换不同类名）
      </view>

text.js

/**
       * 页面的初始数据
       */
      data: {
        writ: [
          { text: "世界顶级的烟火秀，无敌热带海景，再配上三亚国际音乐节的顶级内容，恢弘绚丽的舞美特效，再2019年的跨年，带着世界顶级的烟火秀，无敌热带海景，再配上三亚国际音乐节的顶级内容世界顶级的烟火秀，无敌热带海景，再配上三亚国际音乐节的顶级内容nihaoa" },
        ],
        className: 'wr-bottom',//没有点击之前就给text.wxml页面这个控制还原的类名
        clickBtn: true
        },
     /**
     * 展开详情按钮控制
     */
      onopen: function (options){
        if (this.data.clickBtn){//第一次点击获取上面 clickBtn定义好的 true，给className赋值，这个样式控制的是打开的样式
          this.setData({
            className: 'openwr-bottom',
            clickBtn: false//从新赋值，再次点击就会运行else里面的内容了
          })
        }else{
          this.setData({
            className: 'wr-bottom',
             clickBtn: true//运行过else的内容再次从新赋值，再次点击就会运行if里面的内容了
          })
        }
    },

text.wxss

/* 控制点击还原的样式 */
    .wr-bottom{
    width:640rpx;
    height:160rpx;
    text-align:center;
    margin-left:50rpx;
    line-height:50rpx;
    margin-top:-30rpx;
    overflow: hidden;
    
    }
    /* 点击展开的样式 */
    .openwr-bottom{
    width:640rpx;
    height:auto;
    text-align:center;
    margin-left:50rpx;
    line-height:50rpx;
    margin-top:-30rpx;
    }
    /* 控制展开详情的样式 */
    .open{
      height: 100rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 15rpx solid #e6e6e6;
    }
    }

[20190101085205670.png]: /images/20220401/5f48355c248d4e5ba916e8b651375434.png
[20190101085221105.png]: /images/20220401/7ad4f084c3d14738a3c97ddc23060ca1.png