微信小程序单击元素切换元素的显示和隐藏

wuxia21182026-06-02 23:07

本实例效果，当单击微信小程序中的图片时，该图片隐藏，再次单击时，该图片显示。如此切换。制作步骤如下：

方法一：

在index.wxml中添加一个图片元素。

html 复制代码

 <view class="container" bindtap="handle">
   <image wx:if="{{flag}}" src="../images/haibao/62.jpg"/>
 </view>

在index.js中为flag赋初始数据，再在handle函数中用setData修改flag变量的值

javascript 复制代码

Page({
	data:{
		id:1, title: '王船山简介', flag:true,
	person:{ name:"王船山", age:"1619年10月-1692年2月"	}
		},
	handle: function(){	
	 	this.setData({
			title:'王夫之故居',flag:!this.data.flag})	
	 }	
})

注意：获取flag变量的值要用this.data.flag，但访问flag变量直接用flag即可。

方法2：

在index.wxml中添加一个图片元素。对该元素添加data-flag属性。

html 复制代码

  <view class="container" bindtap="handle">
   <image wx:if="{{flag}}" src="../images/haibao/62.jpg"  data-flag="true"/>
  </view>

在index.js中为flag赋初始数据，再在handle函数中用setData修改data-flag属性的值

javascript 复制代码

Page({
	data:{
		id:1, title: '王船山简介', flag:true,
	},
    handle: function(e){	
		this.setData({
			title:'王夫之故居',flag:!e.target.dataset.flag})	
	}
})

注意：e.target.dataset.属性名可访问元素的自定义属性，形如data-属性名="属性值"。