前端 - 微信小程序点击切换内容问题
PHP中文网
PHP中文网 2017-04-17 14:29:49
[HTML讨论组]
PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(3)
大家讲道理
<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
    });
}
迷茫

在 data 中定义一个字段 xxxx

data: {
        xxxxx : true,
    },

视图这里,通过条件渲染判断需要显示那个视图

<view wx:if="{{xxxx}}"></view>
<view wx:else></view>

点击按钮改变 xxxx 的值

change(){
  var value = !this.data.xxxx;
  this.setData({
    xxxx: value
  })
}
伊谢尔伦

写好两个页面,设置一个 bool 变量 onlyText 储存状态, 为 true 时显示文字版,为 false 时显示图片版。
大概像这样:

<view class="box2" wx:if="{{ onlyText }}">文字版
    <button bindtap="switch">点击切换到图片版</button>
</view>
<view class="box1" wx:else>图片版
    <button bindtap="switch">点击切换到文字版</button>
</view>
var app = getApp();
Page({
    data: {onlyText: true},
    switch: function(){
        this.setData({
            onlyText: !onlyText
        })
    },
    ...
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号