css - 微信小程序点击切换内容问题

问题描述

问 题

有两盒子，想点击底部粉红色区域，切换盒子，粉红色区域文字也要改变，菜鸟刚入门小程序，好多不懂啊

这是一个demo，结构跟项目是一样的，项目页面代码太多了，求大神解救

<view>

<view class="box1">图片版</view>
<view class="box2  none">文字版</view>

</view>

<view>

<view class="button none">点击切换到图片版</view>
<view class="button ">点击切换到文字版</view>

</view>

解决方案

<view class="box1" wx:if="{{type=='图片'}}">图片版</view>
<view class="box2" wx:if="{{type=='文字'}}">文字版</view>

<view class="button" bindtap="toggle">点击切换到{{type}}版</view>

// in js
data: {
    type: '图片'
},
toggle: function(e) {
    var that = this;
    var type = that.data.type === '图片' ? '文字' : '图片';
    that.setData({
        type: type
    });
}

这篇关于css - 微信小程序点击切换内容问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！