小程序学习之旅----绑定属性,对象,传参,事件冒泡,路由导航,链接跳转

xiaoxiao2022-07-05  8


某平台价值19860元的编程课程资料免费领取【点我领取】


Page({ data: { message: 'Hello 小程序!', obj: { name: '绑定对象' }, num: 123, flag: true, aid: 12345, list: ['111', '222', '333'], listobj: [ { title: 'aaa' }, { title: 'bbb' }, { title: 'ccc' } ], listobj2: [ { title: 'aaa', arr: [{ name: 'list1', aid: '1 - 1' }, { name: 'list2', aid: '1 - 2' }] }, { title: 'bbb', arr: [{ name: 'list1', aid: '2 - 1' }, { name: 'list2', aid: '2 - 2' }] }, { title: 'ccc', arr: [{ name: 'list1', aid: '3 - 1' }, { name: 'list2', aid: '3 - 2' }] } ] }, // 微信小程序事件 事件对象 冒泡非冒泡事件 run () { // 自定义方法可以在生命周期函数里执行,也可在页面中执行 console.log('run') }, getMsg () { console.log(this.data.message) }, setData () { this.data.message = '改变后的值' }, // 事件对象 eventFn (e) { console.log(e) // 获取自定义属性的值 console.log(e.currentTarget.dataset.aid) }, // 小程序里面执行方法传值 requestData (aid) { console.log(aid) }, requestViewData (event) { console.log(event.currentTarget.dataset.aid, event) }, // 事件冒泡和绑定 handleTap1 () { console.log('handleTap1') }, handleTap2 () { console.log('handleTap2') }, handleTap3 () { console.log('handleTap3') }, // 生命周期函数 onLoad: function (options) { // 页面加载就触发 console.log(options) this.run() this.requestData('123rrrrr') }, onReady: function () { // Do something when page ready. }, onShow: function () { // Do something when page show. }, onHide: function () { // Do something when page hide. }, onUnload: function () { // Do something when page close. }, onPullDownRefresh: function () { // Do something when pull down. }, onReachBottom: function () { // Do something when page reach bottom. }, onShareAppMessage: function () { // return custom share data when user share. }, onPageScroll: function () { // Do something when page scroll }, onTabItemTap (item) { console.log(item.index) console.log(item.pagePath) console.log(item.text) } }) <view wx:if="{{flag}}"> <text> view 当作div text 当作span 绑定数据--{{message}} 绑定对象--{{obj.name}} 条件判断wx:if='{{flag}}' </text> </view> <view data-aid="{{aid}}">绑定属性:aid</view> <view class="item" wx:for="{{list}}" wx:key="{{index}}"> 列表循环数组{{index}}---{{item}} </view> <view class="item" wx:for="{{listobj}}" wx:key="{{index}}"> 列表循环数组对象{{index}}---{{item.title}} </view> <view class="item" wx:for="{{listobj2}}" wx:key="{{index}}"> 列表循环嵌套数组对象{{index}}---{{item.title}} <view wx:for='{{item.arr}}' wx:key="{{item.aid}}"> {{index}}---{{item.name}}---{{item.aid}} </view> </view> 使用 wx:for-item 可以指定数组当前元素的变量名, 使用 wx:for-index 可以指定数组当前下标的变量名: <view class="item" wx:for="{{listobj2}}" wx:key="{{index}}" wx:for-item='item'> 列表循环嵌套数组对象{{index}}---{{item.title}} <view wx:for='{{item.arr}}' wx:for-item='arr' wx:key="{{arr.aid}}"> {{index}}---{{arr.name}}---{{arr.aid}} </view> </view> <button bindtap="run">执行run方法,不需要加括号</button> <button bindtap="getMsg">执行getMsg方法,获取信息</button> <button bindtap="setData">执行setData方法,设置信息</button> <button bindtap="eventFn" data-aid='123'>事件对象</button> <!--<button bindtap="requestViewData('123456')" >执行方法传值</button> 这种是错误的,不能直接传值--> <!--通过事件对象来传值--> <button bindtap="requestViewData" data-aid='123456' data-cid='123aaa'>执行方法传值</button> <!--事件绑定和冒泡--> <view id="outer" bindtap="handleTap1"> outer view handleTap1 <view id="middle" catchtap="handleTap2"> middle view handleTap2 <view id="inner" bindtap="handleTap3"> inner view handleTap3 </view> </view> </view> { "pages": [ "pages/index/index", "pages/news/news", "pages/user/user", "pages/map/map", "pages/shop/shop" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "小程序学习", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#666", "selectedColor": "#f60", "backgroundColor": "#eee", "borderStyle": "white", "position": "bottom", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/images/home1.png", "selectedIconPath": "static/images/home2.png" }, { "pagePath": "pages/news/news", "text": "新闻", "iconPath": "static/images/news1.png", "selectedIconPath": "static/images/news2.png" }, { "pagePath": "pages/user/user", "text": "用户", "iconPath": "static/images/user1.png", "selectedIconPath": "static/images/user2.png" } ] } } <!--pages/user/user.wxml--> <view class="" hover-class="none" hover-stop-propagation="false"> <button bindtap="goShop">点击跳转shop页面</button> </view> // pages/user/user.js Page({ /** * 页面的初始数据 */ data: { }, goShop () { wx.navigateTo({ url: '../shop/shop' }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

 

转载请注明原文地址: https://www.6miu.com/read-4968466.html

最新回复(0)