小程序view嵌套点击事件问题

在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数

<view bindtap="view"> <text bindtap="toast" class="journey">开启小程序之旅 </text> </view>

子元素触发父级元素也会触发若要只触发子元素使用catchtap代替bindtap

在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({ toast: function (event) { // wxnavigateTo({ // url: '/redirect/redirect' // }); wxredirectTo({ url: '/redirect/redirect', }); // view:function(event){ // // 父级元素 // } }, / 生命周期函数--监听页面隐藏/并未关闭返回 / onHide: function (event) { consolelog(event) }, / 生命周期函数--监听页面卸载/ / onUnload: function () { consolelog(222) }, })

事件分类

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

类型 触发条件 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，d窗 touchend 手指触摸动作结束 tap 手指触摸后马上离开 longtap 手指触摸后，超过350ms再离开

注：除上表之外的其他组件自定义事件如无特殊申明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件官方文档)

微信小程序开发中toast也是重要的消息提示方式

提示框：

wxshowToast(OBJECT)

显示消息提示框

OBJECT参数说明：

示例代码：

12345

wxshowToast({ title:'成功', icon:'success', duration: 2000})

wxhideToast()

隐藏消息提示框

123456789

wxshowToast({ title:'加载中', icon:'loading', duration: 10000}) setTimeout(function(){ wxhideToast()},2000)

wxshowModal(OBJECT)

显示模态d窗

OBJECT参数说明：

示例代码：

123456789

wxshowModal({ title:'提示', content:'这是一个模态d窗', success:function(res) { if(resconfirm) { consolelog('用户点击确定') } }})

wxshowActionSheet(OBJECT)

显示 *** 作菜单

OBJECT参数说明：

success返回参数说明：

示例代码：

12345678

wxshowActionSheet({ itemList: ['A','B', 'C'], success:function(res) { if(!rescancel) { consolelog(restapIndex) } }})

设置导航条

<view>提示：{{tip}}</view>

<button type="default" bindtap="showModal">点击我d出modal对话框</button>

<view>

<modal title="modal对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消"

bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好，我是modal对话框</modal>

</view>

Page({

data:{

// text:"这是一个页面"

tip:'',

buttonDisabled:false,

modalHidden:true,

show:false

},

showModal:function(){

thissetData({

modalHidden:!thisdatamodalHidden

})

},

modalBindaconfirm:function(){

thissetData({

modalHidden:!thisdatamodalHidden,

show:!thisdatashow,

tip:'您点击了确认按钮！',

buttonDisabled:!thisdatabuttonDisabled

})

},

modalBindcancel:function(){

thissetData({

modalHidden:!thisdatamodalHidden,

tip:'您点击了取消按钮！'

})

}

})

wxsetNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

OBJECT参数说明：

示例代码：

123

wxsetNavigationBarTitle({ title:'当前页面'})

wxshowNavigationBarLoading()

在当前页面显示导航条加载动画。

wxhideNavigationBarLoading()

隐藏导航条加载动画。

页面跳转：

wxnavigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wxnavigateBack可以返回到原页面。

OBJECT参数说明：

示例代码：

123

wxnavigateTo({ url:'testid=1'})

123456

//testjsPage({ onLoad:function(option){ consolelog(optionquery) }})

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

wxredirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明：

示例代码：

123

wxredirectTo({ url:'testid=1'})

wxnavigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明：

动画：

wxcreateAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

注意: export 方法每次调用后会清掉之前的动画 *** 作

OBJECT参数说明：

123456

var animation = wxcreateAnimation({ transformOrigin:"50% 50%", duration: 1000, timingFunction:"ease", delay: 0})

animation

动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

样式：

旋转：

缩放：

偏移：

倾斜：

矩阵变形：

动画队列

调用动画 *** 作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wxcreateAnimation() 一样的配置参数用于指定当前组动画的配置。

示例：

1

<viewanimation="{{animationData}}"style="background:red;height:100rpx;width:100rpx"></view>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

Page({ data: { animationData: {} }, onShow:function(){ varanimation = wxcreateAnimation({ duration: 1000, timingFunction:'ease', }) thisanimation = animation animationscale(2,2)rotate(45)step() thissetData({ animationData:animationexport() }) setTimeout(function() { animationtranslate(30)step() thissetData({ animationData:animationexport() }) }bind(this), 1000) }, rotateAndScale:function () { // 旋转同时放大 thisanimationrotate(45)scale(2, 2)step() thissetData({ animationData:thisanimationexport() }) }, rotateThenScale:function () { // 先旋转后放大 thisanimationrotate(45)step() thisanimationscale(2, 2)step() thissetData({ animationData:thisanimationexport() }) }, rotateAndScaleThenTranslate:function () { // 先旋转同时放大，然后平移 thisanimationrotate(45)scale(2, 2)step() thisanimationtranslate(100, 100)step({ duration: 1000 }) thissetData({ animationData:thisanimationexport() }) }})

wxhideKeyboard()

收起键盘。

内容:

一:数据绑定

11 动态内容绑定:

页面的js文件中

数据绑定

12动态属性绑定

13三元表达式

14算术运算

二:事件绑定

21小程序中常用事件

22事件对象的属性列表

23target和currentTarget的区别

currentTarget很少使用

24bindTap语法格式

25 data中数据赋值

26绑定事件传参

27 bind-input的语法格式

28 input 绑定data中的值

31 wx:if

33 hidden

34 wx:if与hidden的区别

37 wx:key的使用

不使用wx:key的提示

四:wxss模板样式

weixin style sheets,是一套样式语言,用于美化wxml组件的样式,类似于网页开发中的css

五:全局配置

51全局配置文件及常用配置项

52 全局配置window

521组成

522常用属性

设置导航栏标题:

设置导航栏背景色和标题色:

全局开启下拉刷新:

注意再appjson中开启下拉刷新会作用于每一个页面

设置下拉刷新时背景色

设置下拉刷新loading样式

532组成

效果:

54 页面配置与全局配置

六:小程序数据请求

61小程序中数据请求的限制

66 跳过request合法域名校验

vue的钩子函数:

beforeCreat: 创建前

created: 创建

beforeMount: 挂载前

mounted: 挂载

beforeupdate: 更改前

updated: 更改

beforeDestroy: 销毁前

destroyed: 销毁

小程序的钩子函数:

onLoad: 页面加载

onShow: 页面显示

onReady: 页面初次渲染完成

onHide: 页面隐藏

onUnload: 页面卸载

vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据

vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：

小程序绑定某个变量的值为元素属性时，会用两个大括号括起来

vue使用v-if 和v-show控制元素的显示和隐藏

小程序使用wx-if和hidden控制元素的显示和隐藏

vue使用v-on:event绑定事件，或者使用@event绑定事件，@eventstop阻止事件冒泡

小程序用bindtap(bind+event)，或者catchtap(catch+event)绑定事件，阻止事件冒泡

vue中如下:

小程序中如下：

vue中的表单元素上加v-model，然后再绑定data中对应的值

小程序中通过thissetData({key:value})将表单上的值赋值给data中的对应值

vue中需要在触发事件的方法中，把需要传递的数据作为形参传入

小程序中需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过ecurrentTargetdataset的方式获取，从而完成参数传递

1，界面上为方法传参数：

前端： <div @click="function(param)"></div>

小程序： <view bindtap="functionName" data-type='param'></view>

functionName: function (e) {

var type = ecurrentTargetdatasettype

}

2，界面中的if语句

前端： <div v-if="condition"></div>

小程序：<view wx:if="{{condition}}">

其中condition是在js中定义的变量

3，双向绑定

小程序：若想将属性的变化实时更新到界面上需要使用：

thissetData({

param: value

})

微信小程序使用的是类似MVVM类型的框架，本质是数据驱动视图，换句话来说就是逻辑层（javascript）去驱动界面层（view）的改变，功能实现核心主要在于 *** 作数据。

下面来详细讲解，微信小程序如何实现tab切换功能，如下图所示：

在wxml文件里面，搭建结构。其中，tab盒子是tab整体，btns里面的view是切换按钮，cons里面的view是切换的盒子内容。

把切换按钮btns和内容cons渲染出来。在js文件里面书写数据，并且在wxml文件里面通过wx:for进行列表渲染输出。

通过d性布局去书写样式。添加cur当前类名去控制当前按钮的样式和当前显示的内容盒子。

注意微信小程序使用的是rpx可以自适应的单位，规定所有屏幕宽度为750rpx，在iPhone6设备屏幕宽度换算是2rpx=1px。

逻辑层添加了active数据控制当前显示盒子。

wxml要书写判断验证去控制盒子是否有cur类名。

上面表达式表示，如果当前项的索引值index等于数据active，则此项有cur这个类名，否则就没有。注意cur类名是控制当前按钮样式和当前显示内容盒子的。

有cur这个类名的按钮会显示当前的样式，有cur这个类名的内容盒子是显示的，但是否有这个类名是通过active这个数据决定的。所以最后我们只需要把active这个数据的值修改成用户点击按钮的索引值即可实现tab切换功能。

首先要给按钮btn自定义索引值等于循环当前项的index，微信小程序给组件自定义索引值是通过在组件身上添加data-index=”{{index}}”属性，然后在js里面即可通过事件对象里面的ecurrentTargetdatasetindex属性获取用户点击按钮的索引值。

给按钮自定义索引值和绑定事件，绑定点击事件通过给按钮组件添加属性bindtap=“函数名”，此处设置函数名为toggle。

把active的值设置为用户点击按钮的索引值，即可实现tab切换功能。

ecurrentTargetdatasetindex获取用户点击按钮的索引值，微信小程序通过thissetData()去修改data里面的数据内容。

        在写一个小程序界面的时候，发现这个页面的按钮点击失效，打印log打印不出来，而其他页面的点击事件仍旧可以触发。找了半天发现按钮被textarea组件遮挡了，导致点击不到。

解决办法：给textarea添加样式，修改它的高度。

注意：可通过下面这个窗口查看各部分大小及其位置，遇到组件失灵时可以先看一下有没有被覆盖。

用thissetData({ shuju1 : shuju2  })，

shuju1：你自己命名的名字，

shuju2：调用接口后返回的数据，

然后你页面就可以用{{shuju1}}，这样来获取了。

微信（wechat）是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序，微信支持跨通信运营商、跨 *** 作系统平台通过网络快速发送免费（需消耗少量网络流量）语音短信、视频、和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务插件。

微信提供公众平台、朋友圈、消息推送等功能，用户可以通过“摇一摇”、“搜索号码”、“附近的人”、扫二维码方式添加好友和关注公众平台，同时微信将内容分享给好友以及将用户看到的精彩内容分享到微信朋友圈。

截至2013年11月注册用户量已经突破6亿，是亚洲地区最大用户群体的移动即时通讯软件。截止2016年12月微信的月活跃用户数已达889亿。

微信由深圳腾讯控股有限公司 (Tencent Holdings Limited)于2010年10月筹划启动，由腾讯广州研发中心产品团队打造 。该团队经理张小龙所带领的团队曾成功开发过Foxmail、QQ邮箱等互联网项目。腾讯公司总裁马化腾在产品策划的邮件中确定了这款产品的名称叫做“微信”。

2011年1月21日，微信发布针对iPhone用户的10测试版。该版本支持通过QQ号来导入现有的联系人资料，但仅有即时通讯、分享照片和更换头像等简单功能。

在随后11、12和13三个测试版中，微信逐渐增加了对手机通讯录的读取、与腾讯微博私信的互通以及多人会话功能的支持，截至2011年4月底，腾讯微信获得了四五百万注册用户。

以上就是关于小程序view嵌套点击事件问题全部的内容，包括:小程序view嵌套点击事件问题、微信小程序如何实现消息提示框、小程序基础等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！