微信小程序 — 怎么获得view中的文本、id等等
2018-02-03 20:37
176 查看
微信小程序-怎么获得view中的文本、id等等?
取id很简单,取text两种情形,分开来说,先说第一个:
一、通过自定义data-text获取与定义一样的文本
解释一下:
首先,一个组件(如
然后,组件都会有共有属性,微信小程序语言也不例外,它的共有属性如下:
然后就用上面的方法用
二、通过this.data获取view文本
解释一下:
初始是给tempText赋值为”Sclifftop~”, 然后点击”获取上一个view文本”,控制台输出Sclifftop~。
没错,获取文本的方式就是
很简单的事,不懂就看API,还看不懂找一些Demo对比着看,其实就是HTML+CSS+JS,部分名称长得不一样罢了,没差
取id很简单,取text两种情形,分开来说,先说第一个:
一、通过自定义data-text获取与定义一样的文本
<!-- 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 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); //输出该文本 } })
解释一下:
首先,一个组件(如
<view></view>)包括开始和结束标签,属性是来修饰这个组件,内容是在两个标签之内,一般会一点html的都知道,我啰嗦一下。
然后,组件都会有共有属性,微信小程序语言也不例外,它的共有属性如下:
id、 class、 style、 hidden这些都不用解释了,html也有。 bind* 、 catch*:这两个是触发事件,此处用到了catch*,只要点击view就会触发执行。 data-*:这个是自定义属性,你可以随意定义,如data-text,然后给他赋值,就相当于html组件input的value。
然后就用上面的方法用
e.target.dataset.text即可获得text,如果你定义的是
data-g,通过
e.target.dataset.g也是可以取出来的,不过这样写就有点皮,尽量符合常规取名规则
二、通过this.data获取view文本
<!-- 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 Page({ data: { tempText: "Sclifftop~" }, pressView: function (e) { var viewText=this.data.tempText; console.log(viewText); //获取上一个view的文本,不需要自定义data-*了 } })
解释一下:
初始是给tempText赋值为”Sclifftop~”, 然后点击”获取上一个view文本”,控制台输出Sclifftop~。
没错,获取文本的方式就是
this.data.tempText,想获取哪个就在那个地方加“占位符
{{ T }}”,通过
T获取
很简单的事,不懂就看API,还看不懂找一些Demo对比着看,其实就是HTML+CSS+JS,部分名称长得不一样罢了,没差
相关文章推荐
- 小程序web-view转发网页,h5页面怎么在微信小程序web view里转发
- 微信小程序 view的文本不能自动换行问题
- 微信小程序 view的文本不能自动换行问题
- AndroidRichText 让Textview轻松的支持富文本(图像ImageSpan、点击效果等等类似QQ微信聊天)
- AndroidRichText 让Textview轻松的支持富文本(图像ImageSpan、点击效果等等类似QQ微信聊天)
- Android RichText 让Textview轻松的支持富文本(图像ImageSpan、点击效果等等类似QQ微信聊天)
- 微信小程序view文本不换行
- 微信小程序长按复制文本
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案一
- 微信小程序代码怎么用工具打开看
- [置顶] 微信小程序的复制文本 text 文本复制
- 【微信小程序教程】点击按钮移动view标签的位置
- ExtJs4.1的TreePanel获得选中叶子的id和文本
- 微信小程序入门——怎么建多个项目?(导入官方Demo程序进行学习)
- 微信小程序下拉加载执行多次怎么破?
- 微信小程序webview跳转小程序内路由
- 微信小程序缓存,根据不同的id来进行设置和读取缓存
- 微信小程序新增的拖动组件movable-view使用教程