資訊專欄INFORMATION COLUMN
摘要：左滑右滑你不再是一個人無論你是一個程序猿還是一個程序媛，每天干的事除了還是，代碼不能解決的問題什么問題自己心里還沒點數嘛，探探能幫你解決。
左滑 右滑 你不再是一個人
無論你是一個程序猿還是一個程序媛，每天干的事除了coding還是coding，代碼不能解決的問題（什么問題自己心里還沒點abcd數嘛），探探能幫你解決。最近網上特流行一款交友軟件叫探探（據說是yp軟件）。作為探探曾經的一名從來只瀏覽圖片但是沒有yue過的資深玩家同時又是一位熱愛前端的妹子，我決定要仿一下這個app。既然是寄幾開發，那還不是寄幾說了算，毫無疑問整款APP的主題風格被我改成我最愛的終極少女粉了hhh，下面讓我們一起來感受下探探的魅力吧~
項目整體效果 項目部分功能點解析 主頁圖片左滑右滑對應按鈕變化首先我們來聊一下最讓我頭痛的地方，就是主頁面的左右滑動事件并且對應按鈕會相應變化，即我左滑一下圖片下面的灰色按鈕會有相應的動畫效果，右滑則對應著圖片下面的紅色按鈕。對于一個剛入小程序坑的妹子來說，沒有大神指點不知道要在這里面的邏輯坑還要繞多久才能繞出來。得一高人指點，我才完美滴實現了這個功能。
這里寫了三個大的盒子放著圖片和文字信息,再將他們放到swiper-item里面，用swiper組件實現整個盒子的左右滑動
K ♂21 金牛座 文化/教育
哦盒子下面不是按鈕，我是放了兩張圖片。
先給他們寫個滑動的時候觸發的動畫效果
.active {
animation: active 1s ease;//定義一個叫做active的動畫
}
@keyframes active {//補充active動作腳本
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1.0);
}
}
在page的data里面定義三個變量，將left,right變量綁定到對應圖片中
data: {
left: false ,
right: false,
activeIndex: 0
},
在swiper綁定事件中具體判斷左右滑動事件
changeswiper: function(e) {
var index = e.detail.current;//當前所在頁面的 index
if(index > this.data.activeIndex) {//左滑事件判斷
this.setData({
left: true//若為左滑，left值為true,觸發圖片動畫效果
})
} else if(index < this.data.activeIndex) {//右滑事件判斷
this.setData({
right: true//若為右滑，right值為true,觸發圖片動畫效果
})
}
setTimeout(() => {//每滑動一次，數據發生變化
this.setData({
activeIndex: index,
left:false,
right:false
})
}, 1000);
},
從本地上傳圖片
這個呀查一查小程序開發文檔就好了，先在要上傳圖片的地方的src綁定個數據變量
放入圖片默認地址，就是上傳圖片之前的添加圖片
data: {
imgUrl: "../../images/addImg.png"
},
通過綁定tap事件將上傳的圖片地址替換進去
uploadImg: function(e) {
var that = this;
wx.chooseImage({
count: 1, //上傳圖片數量
sizeType: ["original", "compressed"], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ["album", "camera"], // 可以指定來源是相冊還是相機，默認二者都有
success: function (res) {// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths;
that.setData({
imgUrl: tempFilePaths
})
wx.showToast({//顯示上傳成功
title: "上傳成功",
icon: "success",
duration: 2000
})
}
})，
配對成功列表據通過easy-mock獲取后臺數據block wx:for渲染一個包含多節點的結構塊
{{item.nickname}}
獲取后臺數據
wx.request({
url: "https://www.easy-mock.com/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList",
success: (res) => {
// console.log(response);
this.setData({
friendsList: res.data.data.friendsList
})
}
})
其它差不多就是切頁面了，個人原因用不太習慣weui的官方樣式，每個頁面都是我自己嘔心瀝血碼出來的，所以大家不喜輕點噴哈,還在努力學習當中~~~
項目開發用到的一些工具微信開發者工具、VScode、Github
Iconfont阿里巴巴矢量圖標庫：各種圖片logo應有盡有，前端開發必備
esay-mock:模擬數據請求，實現無后端編程
W3Cschool微信小程序開發教程手冊文檔：開發小程序要多看看哦
emmmm目前項目功能還是很簡單呀，還有很多功能后面慢慢實現吧~比如利用將上傳的圖片放到storage中，頁面刷新之后圖片依然在，slider滑動到某一處在頁面上保存當前值，模擬配對成功后彈出提醒頁面等等......
也希望遇到熱愛學習的小伙伴一起交流學習，一起在前端坑里越陷越深hhh
項目地址：https://github.com/beautifulg... 求鼓勵~求star呀~
我的郵箱：804316947@qq.com 這里可以找到我哦
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112880.html
摘要：不允許再有其他文件，不允許再有單獨的文件。必須支持標準的四則運算。請在收到郵件的小時內獨立完成本測試，并回復本郵件。項目地址最終版的計算器，項目地址和預覽圖片在。并且使用單位來進行自動計算尺寸。 一道筆試題 之前偶然看到一個公司的筆試題，題目如下： 用HTML5、CSS3、JavaScript，做一個網頁，實現如下圖形式計算器 showImg(https://segmentfault....
摘要：不允許再有其他文件，不允許再有單獨的文件。必須支持標準的四則運算。請在收到郵件的小時內獨立完成本測試，并回復本郵件。項目地址最終版的計算器，項目地址和預覽圖片在。并且使用單位來進行自動計算尺寸。 一道筆試題 之前偶然看到一個公司的筆試題，題目如下： 用HTML5、CSS3、JavaScript，做一個網頁，實現如下圖形式計算器 showImg(https://segmentfault....
摘要：不允許再有其他文件，不允許再有單獨的文件。必須支持標準的四則運算。請在收到郵件的小時內獨立完成本測試，并回復本郵件。項目地址最終版的計算器，項目地址和預覽圖片在。并且使用單位來進行自動計算尺寸。 一道筆試題 之前偶然看到一個公司的筆試題，題目如下： 用HTML5、CSS3、JavaScript，做一個網頁，實現如下圖形式計算器 showImg(https://segmentfault....
摘要：是一個為應用添加觸摸手勢的非常受歡迎的庫文中將看到結合一起使用是多么的簡單原文示例是針對版本經過測試在目前最新的版本中此教程依然適用文章將以來統一代稱版本名詞滑動和類似但滑動更快速無粘滯左滑右滑上滑下滑頭像輪播簡介我們將構建一個頭像輪播可以 HammerJS 是一個為 web 應用添加觸摸手勢的非常受歡迎的庫,文中,將看到 Angular 結合 HammerJS 一起使用是多么的簡單 ...
閱讀 2068·2021-11-24 09:39
閱讀 774·2021-09-30 09:48
閱讀 974·2021-09-22 15:29
閱讀 2409·2019-08-30 14:17
閱讀 1885·2019-08-30 13:50
閱讀 1336·2019-08-30 13:47
閱讀 977·2019-08-30 13:19
閱讀 3418·2019-08-29 16:43
