回顧：上一次已經把消息的布局以及樣式做好了
效果圖：
在removeList.js文件中，messageId就是發起這個消息的用戶了
先查看一下自定義組件的生命周期
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html
lifetimes: { attached: function() { // 在組件實例進入頁面節點樹時執行 }, detached: function() { // 在組件實例被從頁面節點樹移除時執行 }, }
直接就是在lifttimes裏面進行定義的（直接就是在methods的同級的下面加上即可了）
因為要對用戶的信息進行渲染，就可以看成是一個一個的對象，所以就可以在removeLIst.js中定義一個對象
然後遇到的問題就和之前是一樣的了，就是我們得到的數據太多了，沒必要全部都要，可以選擇性的要，只需要頭像和昵稱
（所以就可以在get前面來一個field）
lifetimes: { attached: function () { // 一進來就會進行它了 db.collection('users').doc(this.data.messageId) .field({ userPhoto : true, nickName : true }) .get().then((res)=>{ this.setData({ userMessage : res.data }); }); } }
這樣的話我們在這個頁面裏面就可以得到用戶的數據了，剩下的就是直接可以在wxml中用了
<!--components/removeList/removeList.wxml--> <movable-area class="area"> <movable-view direction="horizontal" class="view">{{ userMessage.nickName }}</movable-view> <image src="{{ userMessage.userPhoto }}" /> <view class="delete">刪除</view> </movable-area>
效果圖：
在之後設置刪除功能之前，先設置一下就是只要點擊了消息列表中用戶的頭像之後，就可以跳轉到這個用戶的詳情頁了
可以直接 在編輯個人信息的頁面 editUserInfo.wxml中COPY代碼
在設置這個跳轉頁面的url的時候，因為同時要給這個url傳遞參數的，所以這個時候就要用大括號括起來了
<!--components/removeList/removeList.wxml--> <movable-area class="area"> <movable-view direction="horizontal" class="view">{{ userMessage.nickName }}</movable-view> <navigator url="{{'/pages/detail/detail?userId=' + userMessage._id}}" open-type="navigate"> <image src="{{ userMessage.userPhoto }}" /> </navigator> <view class="delete">刪除</view> </movable-area>
即可實現，點擊頭像跳轉到個人的詳情頁面
二、下面就是對刪除功能進行設計
一開始的就是，點擊了之後，要給用戶一個提示信息，讓用戶可以選擇是取消還是確定的，這裏用的是一個wx.showModel這樣一個內置的方法
所以就要另外的給“點擊了確定”加邏輯了，就要在微信開放文檔裏面細看這個API了
https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html
wx.showModal({
title: '提示',
content: '這是一個模態彈窗',
success (res) {
if (res.confirm) {
console.log('用戶點擊確定')
} else if (res.cancel) {
console.log('用戶點擊取消')
}
}
})
把查到的賦值給list，然後在用數組的filter進行刪除即可了
通過fileter過濾之後，就是過濾初和我們不想要的東西，然後把這些東西再次賦值為list，然後我們把前後的list打印出來會發現：
確實是過濾掉了的
由於如果要刪掉的話，就設計了removeList這個組件和message這各頁面之間的通信了，並且是子組件像父組件，用到事件來做的
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html
<!-- 當自定義組件觸發“myevent”事件時，調用“onMyEvent”方法 --> <component-tag-name bindmyevent="onMyEvent" /> <!-- 或者可以寫成 --> <component-tag-name bind:myevent="onMyEvent" />
所以在message.wxml中隊子組件remove-list設置
<remove-list wx:for="{{ userMessage }}" wx:key="{{index}}" messageId="{{ item }}" bindmyevent="onMyEvent"/>
這樣事件監聽就寫好了，但是如何在組件中觸發呢，我們回到removelist.js中
繼續查看山脈的鏈接-微信開發文檔
Component({
properties: {},
methods: {
onTap: function(){
var myEventDetail = {} // detail對象，提供給事件監聽函數
var myEventOption = {} // 觸發事件的選項
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
在removelist.js中通過：
this.triggerEvent('myevent',list)
前面參數，要和在 message.wxml設置的 bindmyevent，後面的myevent對應上
第二個參數就是我們 過濾剩下的list
給message傳過去之後
onMyEvent(ev){ this.setData({ userMessage : ev.detail });
通過這樣的設置出現了一個bug，就是我們刪除第一條信息的時候，直接把第二條刪掉了，第一條被留下來了
當我們查看數據庫的時候，留下來的就是第二條信息，但是在前端显示的是第一條信息留下，第二條信息沒了
要這樣修改：
onMyEvent(ev){ this.setData({ userMessage : [] },()=>{ this.setData({ userMessage : ev.detail }); }); }
先賦值為空，之後再次調用removelist，再把過濾的數組進行賦值
也就是全部清空之後，再重新渲染的
整個邏輯：
1、在數據庫中用戶的頭像和昵稱找到，然後獲取數據
2、點擊刪除按鈕的時候，彈出提示框，如果用戶點了缺點刪除的話，之後我們先查詢
找到之後，把那個消息在message列表中過濾掉
3、然後再重新的更新，之後就觸發子父通信，把更新之後的list傳給
4、父組件拿到removelist這組件的信息
拿到就更新我們的列表，這樣的話列表就發送了變化了
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※帶您來了解什麼是 USB CONNECTOR ?
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!
※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※教你寫出一流的銷售文案?
特斯拉當家電動車 Model S 不再完美無缺，去年給予 Model S 最高評級的消費者評鑒雜誌《Consumer Reports》點出 Model S 仍許多有小缺陷待改進。 《Consumer Reports》指出，Model S 多在跑超過一萬哩後出現問題，例如里程數超過 1.2 萬哩後，中央控制螢幕在會有反白的狀況，使多項功能無法操作。此外，還有車頂會發出異常噪音，前置行李箱蓋會自動開啟等問題。 Model S 去年 5 月在《Consumer Reports》評鑑中拿下 99 分(滿分 100 分)，創史上最高分，之後並在 11 月獲選為年度 10 大好車第一名。 對此，特斯拉執行長 Elon Musk 7 月 31 日曾坦承，較早一批出廠的 Model S 的確有些生產上的瑕疵，但目前出廠的新車多已作修正。 （圖片來源：）
印度政府日前通過一項 23 億美元的電動車產業振興計劃──2020 國家電動車行動計劃(NEMMP 2020 plan)，打算重新帶起終止補貼後明顯下滑的電動車銷量。 印度政府過去對電動車的銷售補貼相當成功，全盛時期銷售量甚至超過 10 萬輛，但當新暨再生能源部 MNRE 在 2012 年 3 月停止補貼後，銷售量開始下滑，到了 2013 年，只剩 2.1 萬輛。幾年前，印度有 65 家電動車製造商，現在只剩 10家還在營運。 NEMMP 計劃目標是在 2020 年有 6 到 7 百萬輛電動車上路，而其中 4 到 5 百萬輛為二輪車，若達到該銷量數字，還能節省超過 200 萬噸燃料的使用。 雖然大多數電動車公司在過去兩年來已停止營運，但假如 NEMMP 2020 可在接下來的 3 或 4 個月間實施，預期印度電動車產業仍可復甦。 （圖片來源：）
近來積極拓展車用電池事業的南韓化學巨擘 LG Chem Ltd. 宣佈，該公司已敲定價值數億美元的電動車電池供應合約，對象是德國汽車製造商福斯 (Volkswagen AG) 旗下的豪華車廠奧迪 (Audi AG)。 LG Chem 目前為通用汽車 (General Motors Co.)、雷諾 (Renault SA)、福特汽車 (Ford Motor Co.)、現代汽車 (Hyundai Motor Co.) 以及起亞汽車 (Kia Motors Corp.) 等 20 家業者的車用電池供應商。日前 LG Chem 才宣布將與通用汽車等汽車廠商攜手研發一款車用電池，其單次充電的里程數多達 200 英里，為市面上大多數電動車的兩倍以上。 20 日 LG Chem 又傳出好消息，該公司透過聲明表示，會為奧迪的次世代插電式混合動力電動車提供車用電池，總值多達數百億韓圜，而由於奧迪與母公司福斯一起共用了許多汽車平台，因此 LG Chem 認為未來應該能與福斯敲定更多類似的協議。 （圖片來源：）