微信小程序时间调用
微信小程序事件是视图层到逻辑层的通讯方式
事件是用户与微信小程序交互的通讯接口
在JS中就有事件操作的概念,微信小程序的更加简便
使用方式:
法一:bind+事件类型
法二:catch+事件类型
事件的分类
冒泡事件:
当一个组件的事件被触发以后,该事件会向父节点传递部分列表
Touchmove,tap,longtap
非冒泡事件:
当一个组件的事件被触发以后,该事件不会像父节点传递
事件的捕获
事件对象:
每次触发事件时,都会传递一个对象给到JS
BaseEvent的属性:
Type 事件类型
Timestamp 时间戳
Target 属性集合(事件源组件)
id 事件源组件id
dataset 事件源组件上的自定义集合
currentTarget 当前组件的一些属性值集合
dataset 事件源组件上的自定义集合
写一个例子吧:
.wxml:
<view class="body">
<view class="container">
<scroll-view scroll-x class="scroll-nav" enable-flex="true">
<navigator data-navindex="0" bindtap="mz1" class="{{currenttab==0?'color-dian':'color-song'}}">生活美照1</navigator>
<navigator data-navindex="1" bindtap="mz2" class="{{currenttab==1?'color-dian':'color-song'}}">生活美照2</navigator>
<navigator data-navindex="2" bindtap="mz3" class="{{currenttab==2?'color-dian':'color-song'}}">生活美照3</navigator>
<navigator data-navindex="3" bindtap="mz4" class="{{currenttab==3?'color-dian':'color-song'}}">生活美照4</navigator>
<navigator data-navindex="4" bindtap="mz5" class="{{currenttab==4?'color-dian':'color-song'}}">生活美照5</navigator>
</scroll-view>
</view>
<view>
<swiper current="{{currenttab}}" bindchange="change1">
<swiper-item>
<view class="sw"><image src=""></image></view>
</swiper-item>
<swiper-item>
<view class="sw"><image src=""></image></view>
</swiper-item>
<swiper-item>
<view class="sw"><image src=""></image></view>
</swiper-item>
<swiper-item>
<view class="sw"><image src=""></image></view>
</swiper-item>
<swiper-item>
<view class="sw"><image src=""></image></view>
</swiper-item>
</swiper>
</view>
<view>
<view class="zwjs"> <text>个人介绍</text> </view>
<view> <text>姓名:</text> </view>
<view> <text>年龄:</text> </view>
<view> <text>爱好:</text> </view>
</view>
</view>
.wxss:
.scroll-nav{
display: flex;
white-space: nowrap;
height: 60rpx;
background-color: aqua;
}
.scroll-nav navigator{
margin: 0 10rpx;
}
image{
width:100%;
}
.sw{
width: 100%;
height: 50%;
}
.color-dian{
color: green;
}
.color-song{
color: yellow;
}
.zwjs{
text-align: center;
color: tomato;
font-weight: bold;
}
.body{
height: 100%;
background-color: mediumspringgreen;
}
.js:
// pages/jrtt/jrtt.js
Page({
/**
* 页面的初始数据
*/
data: {
currenttab:1
},
mz1:function(event){
var mz1index = event.currentTarget.dataset.navindex
this.setData({currenttab:mz1index})
},
mz2:function(event){
var mz1index = event.currentTarget.dataset.navindex
this.setData({currenttab:mz1index})
},
mz3:function(event){
var mz1index = event.currentTarget.dataset.navindex
this.setData({currenttab:mz1index})
},
mz4:function(event){
var mz1index = event.currentTarget.dataset.navindex
this.setData({currenttab:mz1index})
},
mz5:function(event){
var mz1index = event.currentTarget.dataset.navindex
this.setData({currenttab:mz1index})
},
change1:function(event){
var dq = event.detail.current
this.setData({currenttab:dq})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})