成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

左滑右滑的樂趣

Muninn / 3537人閱讀

摘要：左滑右滑你不再是一個人無論你是一個程序猿還是一個程序媛，每天干的事除了還是，代碼不能解決的問題什么問題自己心里還沒點(diǎn)數(shù)嘛，探探能幫你解決。

左滑 右滑 你不再是一個人

無論你是一個程序猿還是一個程序媛，每天干的事除了coding還是coding，代碼不能解決的問題（什么問題自己心里還沒點(diǎn)abcd數(shù)嘛），探探能幫你解決。最近網(wǎng)上特流行一款交友軟件叫探探（據(jù)說是yp軟件）。作為探探曾經(jīng)的一名從來只瀏覽圖片但是沒有yue過的資深玩家同時又是一位熱愛前端的妹子，我決定要仿一下這個app。既然是寄幾開發(fā)，那還不是寄幾說了算，毫無疑問整款A(yù)PP的主題風(fēng)格被我改成我最愛的終極少女粉了hhh，下面讓我們一起來感受下探探的魅力吧~

項目整體效果

項目部分功能點(diǎn)解析 主頁圖片左滑右滑對應(yīng)按鈕變化

首先我們來聊一下最讓我頭痛的地方，就是主頁面的左右滑動事件并且對應(yīng)按鈕會相應(yīng)變化，即我左滑一下圖片下面的灰色按鈕會有相應(yīng)的動畫效果，右滑則對應(yīng)著圖片下面的紅色按鈕。對于一個剛?cè)胄〕绦蚩拥拿米觼碚f，沒有大神指點(diǎn)不知道要在這里面的邏輯坑還要繞多久才能繞出來。得一高人指點(diǎn)，我才完美滴實(shí)現(xiàn)了這個功能。

這里寫了三個大的盒子放著圖片和文字信息,再將他們放到swiper-item里面，用swiper組件實(shí)現(xiàn)整個盒子的左右滑動


    
         
             
            K
            ♂21
            金牛座
            文化/教育

哦盒子下面不是按鈕，我是放了兩張圖片。

先給他們寫個滑動的時候觸發(fā)的動畫效果

.active {
    animation: active 1s ease;//定義一個叫做active的動畫
}
@keyframes active {//補(bǔ)充active動作腳本
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.0);
    }
}

在page的data里面定義三個變量，將left,right變量綁定到對應(yīng)圖片中

data: {
    left: false ,
    right: false,
    activeIndex: 0
},

在swiper綁定事件中具體判斷左右滑動事件

changeswiper: function(e) {
    var index = e.detail.current;//當(dāng)前所在頁面的 index
    if(index > this.data.activeIndex) {//左滑事件判斷
      this.setData({
        left: true//若為左滑，left值為true,觸發(fā)圖片動畫效果
      })
    } else if(index < this.data.activeIndex) {//右滑事件判斷
      this.setData({
        right: true//若為右滑，right值為true,觸發(fā)圖片動畫效果
      })
    }
    setTimeout(() => {//每滑動一次，數(shù)據(jù)發(fā)生變化
      this.setData({
        activeIndex: index,
        left:false,
        right:false
      })
    }, 1000);
  },
從本地上傳圖片

這個呀查一查小程序開發(fā)文檔就好了，先在要上傳圖片的地方的src綁定個數(shù)據(jù)變量

放入圖片默認(rèn)地址，就是上傳圖片之前的添加圖片

data: {
    imgUrl: "../../images/addImg.png"
  },

通過綁定tap事件將上傳的圖片地址替換進(jìn)去
uploadImg: function(e) {

var that = this;
wx.chooseImage({
  count: 1, //上傳圖片數(shù)量
  sizeType: ["original", "compressed"], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
  sourceType: ["album", "camera"], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
  success: function (res) {// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
      var tempFilePaths = res.tempFilePaths;
      that.setData({
          imgUrl: tempFilePaths
    })
      wx.showToast({//顯示上傳成功
          title: "上傳成功",
          icon: "success",
          duration: 2000
    })
  }

})，

配對成功列表據(jù)通過easy-mock獲取后臺數(shù)據(jù)

block wx:for渲染一個包含多節(jié)點(diǎn)的結(jié)構(gòu)塊


    
        
            
                
                    
                 
                
                    {{item.nickname}}
                    {{item.message}}

獲取后臺數(shù)據(jù)

wx.request({
      url: "https://www.easy-mock.com/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList",
      success: (res) => {
        // console.log(response);
        this.setData({
          friendsList: res.data.data.friendsList
        })
      }
    })

其它差不多就是切頁面了，個人原因用不太習(xí)慣weui的官方樣式，每個頁面都是我自己嘔心瀝血碼出來的，所以大家不喜輕點(diǎn)噴哈,還在努力學(xué)習(xí)當(dāng)中~~~

項目開發(fā)用到的一些工具

微信開發(fā)者工具、VScode、Github
Iconfont阿里巴巴矢量圖標(biāo)庫：各種圖片logo應(yīng)有盡有，前端開發(fā)必備
esay-mock:模擬數(shù)據(jù)請求，實(shí)現(xiàn)無后端編程
W3Cschool微信小程序開發(fā)教程手冊文檔：開發(fā)小程序要多看看哦

小結(jié)

emmmm目前項目功能還是很簡單呀，還有很多功能后面慢慢實(shí)現(xiàn)吧~比如利用將上傳的圖片放到storage中，頁面刷新之后圖片依然在，slider滑動到某一處在頁面上保存當(dāng)前值，模擬配對成功后彈出提醒頁面等等......

也希望遇到熱愛學(xué)習(xí)的小伙伴一起交流學(xué)習(xí)，一起在前端坑里越陷越深hhh

項目地址：https://github.com/beautifulg... 求鼓勵~求star呀~
我的郵箱：[email protected] 這里可以找到我哦

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112880.html

相關(guān)文章

  • 純 HTML+CSS+JavaScript 編寫的計算器應(yīng)用

    摘要：不允許再有其他文件，不允許再有單獨(dú)的文件。必須支持標(biāo)準(zhǔn)的四則運(yùn)算。請在收到郵件的小時內(nèi)獨(dú)立完成本測試，并回復(fù)本郵件。項目地址最終版的計算器，項目地址和預(yù)覽圖片在。并且使用單位來進(jìn)行自動計算尺寸。 一道筆試題 之前偶然看到一個公司的筆試題，題目如下： 用HTML5、CSS3、JavaScript，做一個網(wǎng)頁，實(shí)現(xiàn)如下圖形式計算器 showImg(https://segmentfault....

    PiscesYE 評論0 收藏0

  • 純 HTML+CSS+JavaScript 編寫的計算器應(yīng)用

    摘要：不允許再有其他文件，不允許再有單獨(dú)的文件。必須支持標(biāo)準(zhǔn)的四則運(yùn)算。請在收到郵件的小時內(nèi)獨(dú)立完成本測試，并回復(fù)本郵件。項目地址最終版的計算器，項目地址和預(yù)覽圖片在。并且使用單位來進(jìn)行自動計算尺寸。 一道筆試題 之前偶然看到一個公司的筆試題，題目如下： 用HTML5、CSS3、JavaScript，做一個網(wǎng)頁，實(shí)現(xiàn)如下圖形式計算器 showImg(https://segmentfault....

    youkede 評論0 收藏0

  • 純 HTML+CSS+JavaScript 編寫的計算器應(yīng)用

    摘要：不允許再有其他文件，不允許再有單獨(dú)的文件。必須支持標(biāo)準(zhǔn)的四則運(yùn)算。請在收到郵件的小時內(nèi)獨(dú)立完成本測試，并回復(fù)本郵件。項目地址最終版的計算器，項目地址和預(yù)覽圖片在。并且使用單位來進(jìn)行自動計算尺寸。 一道筆試題 之前偶然看到一個公司的筆試題，題目如下： 用HTML5、CSS3、JavaScript，做一個網(wǎng)頁，實(shí)現(xiàn)如下圖形式計算器 showImg(https://segmentfault....

    fancyLuo 評論0 收藏0

  • [譯] 在 Angular 中使用 HammerJS (觸摸手勢)

    摘要：是一個為應(yīng)用添加觸摸手勢的非常受歡迎的庫文中將看到結(jié)合一起使用是多么的簡單原文示例是針對版本經(jīng)過測試在目前最新的版本中此教程依然適用文章將以來統(tǒng)一代稱版本名詞滑動和類似但滑動更快速無粘滯左滑右滑上滑下滑頭像輪播簡介我們將構(gòu)建一個頭像輪播可以 HammerJS 是一個為 web 應(yīng)用添加觸摸手勢的非常受歡迎的庫,文中,將看到 Angular 結(jié)合 HammerJS 一起使用是多么的簡單 ...

    lifesimple 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<