微信小程序 — 怎么获得view中的文本、id等等

作者: web 发布时间: 2019-05-16 浏览: 4882 次 编辑

取id很简单,取text两种情形,分开来说,先说id和第一种:

一、通过自定义data-text获取与定义一样的文本

index.html

<!-- index.wxml -->
<view id="outer" catchtap='pressView'>
  <view class="top">
    <view class="clear" id="clear" data-text="C">C</view> <!-- 那个data-text就是你自定义的 -->
  </view>
</view>

index.js

//index.js
Page({

  pressView: function (e) {
    var viewId = e.target.id;
    var viewDataSet = e.target.dataset;
    var viewText = viewDataSet.text;
    console.log(viewId); //输出点击的view的id,第二种情况就不重复写了
	console.log(viewText); //输出该文本
  }

})

解释一下:

  1. 1, 首先,一个组件(如<view></view>)包括开始和结束标签,属性是来修饰这个组件,内容是在两个标签之内,一般会一点html的都知道,我啰嗦一下。

  2. 2, 然后,组件都会有共有属性,微信小程序语言也不例外,它的共有属性如下:

  3. id、 class、 style、 hidden这些都不用解释了,html也有。

  4. bind* 、 catch*:这两个是触发事件,此处用到了catch*,只要点击view就会触发执行。

  5. data-*:这个是自定义属性,你可以随意定义,如data-text,然后给他赋值,就相当于html组件input的value。

    3,   然后就用上面的方法用 e.target.dataset.text即可获得text,如果你定义的是data-g,通过e.target.dataset.g也是可以取出来的,不过这样写就有点皮,尽量符合常规命名规则


二、通过this.data获取view文本

index2.html

<!-- index2.wxml -->
<!-- 这是我临时写的一点,button用view代替,没差,主要知道怎么获取就好 -->
<view id="outer" catchtap='pressView'>
  <view class="top">
    <view class="temp" id="temp" >{{tempText}}</view> 
    <view class="click" id="click" >获取上一个view文本</view> 
  </view>
</view>

index2.js

//index2.js
Page({
 data: {
    tempText: "Sclifftop~"
  },
  pressView: function (e) {
    var viewText=this.data.tempText; 
    console.log(viewText); //获取上一个view的文本,不需要自定义data-*了
  }

})

解释一下:

  1. 1, 初始是给tempText赋值为"Sclifftop~", 然后点击"获取上一个view文本",控制台输出Sclifftop~。

  2. 2, 没错,获取文本的方式就是this.data.tempText,想获取哪个就在那个地方加“占位符{{ T }}”,通过T 获取