扫码关注官方订阅号
认证高级PHP讲师
<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中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
在 data 中定义一个字段 xxxx
视图这里,通过条件渲染判断需要显示那个视图
点击按钮改变 xxxx 的值
写好两个页面,设置一个 bool 变量 onlyText 储存状态, 为 true 时显示文字版,为 false 时显示图片版。
大概像这样: