微信小程式wx:for給每一個元素加事件,並獲取元素內容
阿新 • • 發佈:2019-01-31
首先是wxml
<view class='js'> <view wx:for="{{adressMessages}}">/*這裡是元素的內容*/ <text class='diming'>{{item.diming}}</text> <view class='lines1'></view> <view class='lv2'>地址:</view> <view style='width:650rpx'> <text class='txt' decode="{{true}}">{{item.dz}}</text> </view> <view class='lv2'>諮詢電話:</view>/*這裡我們需要點選電話號碼撥打電話*/ <view style='width:650rpx'> /*設定bindtap點選事件函式*/ /*關鍵一部,設定data-item或者data-id等等,裡面填你要打的電話*/ <text class='txt colors' decode="{{true}}" bindtap='call1' data-item="{{item.phone1}}">{{item.phone1}}</text> <text decode="{{true}}"> </text> <text class='txt colors' decode="{{true}}" bindtap='call2' data-item="{{item.phone2}}">{{item.phone2}}</text> <!-- <text decode="{{true}}"></text> --> <text class='txt' decode="{{true}}"> {{item.teacher}}</text> </view> <view class='lv2'>諮詢QQ:</view> <view style='width:650rpx'> <text class='txt' decode="{{true}}">{{item.qq}}</text> </view> <view style='height:50rpx'></view> </view> </view>
照例無關css不寫
js頁面
data: { //相關資訊的填寫 adressMessages:[ { 'diming': '杭州總部', 'dz': '杭州市下沙6號大街260號中自科技園3幢2樓(23號大街與6號大街街交界處)\n(地鐵1號至文海南路站 下車;公交可坐B1區間2、k104至6號大街23號路口下車)', 'phone1': '0571-86926616', 'phone2': '15372045773', 'teacher': '(楊老師)', 'qq':'1040745679、1363776175'}, { 'diming': '衢州分部', 'dz': '衢州柯城區亭川東路393號', 'phone1': '15372408002', 'phone2': '', 'teacher': '(微信同步)馮老師', 'qq': '3558529686' }, { 'diming': '寧波分部', 'dz': '寧波市海曙區新典路46號寧波職業技術學院', 'phone1': '15306717201', 'phone2': '', 'teacher': '(微信同步)李老師', 'qq': '2211974900' }, { 'diming': '金華分部', 'dz': '金華義烏市稠城江東中路346號 百瑞酒店7樓', 'phone1': '13750925779', 'phone2': '', 'teacher': '(微信同步)黃老師', 'qq': '2965708836' }, { 'diming': '溫州分部', 'dz': '溫州市茶山鎮鞋城路10號', 'phone1': '15306718513', 'phone2': '', 'teacher': '(微信同步)沈老師', 'qq': '2240288265' }, { 'diming': '紹興分部', 'dz': '浙江越秀外國語學院:紹興越城區會稽路428號', 'phone1': '15306717201', 'phone2': '', 'teacher': '(微信同步)李老師', 'qq': '2211974900' }, { 'diming': '麗水分部', 'dz': '麗水市蓮都區學院路1號麗水學院民族學院', 'phone1': '15372413313', 'phone2': '', 'teacher': '(微信同步)陳老師', 'qq': '1784518088' }, { 'diming': '台州分部', 'dz': '臨海市東方大道605號台州學院', 'phone1': '15306718513', 'phone2': '', 'teacher': '(微信同步)沈老師', 'qq': '2240288265' }, ] }, //彈框電話 call1:function(e){ //重要的一步,獲取你的元素 我寫的是data-item,這裡就是e.currentTarget.dataset.item //如果是id或者其他的只要改下就好了 var phonenum = e.currentTarget.dataset.item wx:wx.makePhoneCall({ phoneNumber: phonenum, success: function(res) {}, fail: function(res) {}, complete: function(res) {}, }) }, call2: function (e) { var phonenum = e.currentTarget.dataset.item wx: wx.makePhoneCall({ phoneNumber: phonenum, success: function (res) { }, fail: function (res) { }, complete: function (res) { }, }) },
//加幾張效果圖片吧