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

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

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

配图解释

设计样式:
在这里插入图片描述
展开样式
在这里插入图片描述
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;
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值