国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序之--(與唯品會來場粉紅色的邂逅 ???)

tianlai / 504人閱讀

摘要:微信小程序之與唯品會來場粉紅色的邂逅買買買,雖然雙十二剛過,可是唯品會的折扣卻是依然火爆。一打開頁面,便是粉色的主頁映入眼簾,琳瑯滿目的商品,讓我這個月光族過了把眼癮。

Welcome to miaomiaoXiong"s segmentfault

微信小程序之--(與唯品會來場粉紅色的邂逅  ???)

買買買,雖然雙十二剛過,可是唯品會的折扣卻是依然火爆。一打開頁面,便是粉色的主頁映入眼簾,琳瑯滿目的商品,讓我這個月光族過了把眼癮。雖然買不起,那就自己模仿著寫一個,把喜歡的商品一個個推進小推車里。(?)下面為大家分享一個把唯品會里面的精致商品推進自己購物車的微信小程序,?

主要實現功能--購物車加購

話不多說,扔個代碼看看:

主頁面: 輪播圖片這個小技巧比較普遍的被使用,代碼如下:

index.wxml:使用swiper組件,里面放置block wx:for 循環movies 圖片數組,再次使用swiper-item 依次將item.url 圖片地址輸出,就可以看到我們的輪播圖了。


  
    
  

swiper 屬性具體小提示

動畫效果 1. 購物車搖擺動畫

兩個小動畫: 加購小車左右搖擺動畫效果, 收藏小愛心動畫效果。

點擊圖中的購買圖片,我們的購物車就會隨之扭扭身體,表示已經加入購物車? , 具體代碼如下:

在 wxml 中添加 animation="{{rorateAnimation}}" 動畫。
animation 動畫

? ? ?

在對應的 js 中將購物車加購動畫具體實現, 當 goumai: function() 觸發時,創建動畫 wx.createAnimation() , 通過 animation.rotate().step() 實現加購中小車搖擺的過程,代碼如下:

biadtap 事件

// 購買點擊事件,觸發時使購物車圖片放大
goumai: function (event) {
var animation = wx.createAnimation({
duration: 100,
})
//購物車旋轉
animation.rotate(30).step();
animation.rotate(0).step();
animation.rotate(-30).step();
animation.rotate(0).step();
this.setData({
rorateAnimation: animation.export(),
})
},

2.愛心收藏動畫

送走了購物車的加購動畫,下面為大家分享一個收藏動畫, 愛心 ?
類似之前的購物車動畫,首先我們在 wxml 中綁定事件 bindtap="shoucang" ,同樣使用 animation="{{enlargeAnimation}}" ?獲取動畫效果, 代碼如下:

js 文件中同樣使用 wx.createAnimation() 創建動畫,animation.opacity(0.6).scale(0.9).step();//修改透明度,放大

//收藏,動畫放大效果
shoucang: function (event) {
var animation = wx.createAnimation({
duration: 700,
})
// 圖片放大
animation.opacity(0.6).scale(0.9).step();//修改透明度,放大
this.setData({
enlargeAnimation: animation.export()
})
},

是不是覺得超級簡單, 通過一個事件綁定秀出你的神操作。

下面,該是嚴肅的時候了,以上只是簡單的切頁面,我們要把喜歡的東西加進購物車,保持頭腦清醒,跟著我把購物車的邏輯理理清楚 ?

數據流程步驟 1.easy-mock 創建數據

?首先我們要在 easy-mock 上創建一份自己的數據,
easy-mock 點擊進入

通過 wx.request({url:"....."}) 獲取你的easy-mock 中的數據, 代碼示例如下:

onLaunch(options) {
// 請求數據
wx.request({
url: "https://www.easy-mock.com/moc...",
success: (response) => {
? ? ? ?//console.log(response.data.data);
? ? ? ?// 通過 ?this.globalData.movies 獲取easy-mock 中的 movies 數組,
? ? ? ? // ?除了全局變量的 js, 其他 js 頁面要獲取數據,需要 const app = getApp() 定義,
? ? ? ? // 才能使用全局中的數據
?this.globalData.movies = response.data.data.movies,
this.globalData.img = response.data.data.img,
this.globalData.goods = response.data.data.goods
}
})
},

2.設置全局變量

由于商品頁面加入購物車然后要在購物車頁面顯示, 我額外的設置了一個全局數組 buy ,以便之后在購物車頁面顯示我所添加的物品詳情 (圖片, 價格 ,數量等), 在 app.js 中代碼如下:

globalData: {
buy:[]
}

3.獲取全局數據并引用

?在商品頁面中的 js 文件中通過 onLoad: function () 將數據從全局中獲取

onLoad: function () {
this.setData({
movies: app.globalData.movies,
goods: app.globalData.goods
});

4.bindtap 事件綁定

在 wxml 中通過綁定事件 bindtap="buy" 將選中的商品放入我們的購物車頁面

在對應的 js 文件中具體實現 buy 事件代碼如下:

// 購買, 點擊圖片,購物車顯示已加購
buy: function (e) {
for (var i = 0; i < this.data.goods.length;i++){
? ?//點擊購買圖片觸發 buy 事件 ,其中的 item.id 具有唯一性, 將其傳入函數中與原來的所有商品中的 id 相匹配, 如果存在,即把它 push 進新的數組 buy 中。
?if (e.currentTarget.dataset.id == this.data.goods[i].id) {
app.globalData.buy.push(this.data.goods[i])
console.log(app.globalData.buy)
}
}
},

購物車已經放好了我們的寶貝,接下來要顯示才可以, 繼續我們的 js 數據征途 fighting!!!

1.清楚地明白我們要什么, 如: 商品圖片, 名稱, 價格, 但是為了實現數量的增減效果,需要額外設置 全選 allSelect: "circle", 數量 num: 0, 共計數額 count: 0

data: {
allSelect: "circle",
num: 0,
count: 0,
},

2.將全局數據 ?buy 數組添加到我們購物車的 js 頁面中, 代碼如下:

setData

onLoad: function () {
?//通過 ?onload 函數加載數據
this.setData({
buy: app.globalData.buy,
});
},

3.計算商品數量, 代碼如下:

//計算數量
countNum: function () {
var that = this
//遍歷數組,把既選中的num加起來
var newList = that.data.buy
var allNum = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
allNum += parseInt(newList[i].num)
}
}
parseInt
console.log(allNum)
that.setData({
num: allNum
})
},

4.計算商品金額,代碼如下:

//計算金額方法
count: function () {
var that = this
//選中的訂單,數量*價格加起來
var newList = that.data.buy
var newCount = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
newCount += newList[i].num * newList[i].price
}
}
that.setData({
count: newCount
})
}
?
5.將購物車中的商品數量添加,代碼如下:

//商品數量增加函數
?addtion: function (e) {
var that = this
//得到下標
var index = e.currentTarget.dataset.index
// 得到點擊的值
var num = e.currentTarget.dataset.num
num++
// 把新的值給新的數組
var newList = that.data.buy
newList[index].num = num
//把新的數組傳給前臺
that.setData({
buy: newList
})
//調用計算數目方法
that.countNum()
//計算金額
that.count()
},

6.將購物車中的商品數量減少,但數量減少到小于1時,該商品就會消失,代碼如下:

//商品數量減少
subtraction: function (e) {
var that = this
// 得到下標
var index = e.currentTarget.dataset.index
//得到點擊的值
var num = e.currentTarget.dataset.num
//把新的值給新的數組
var newList = that.data.buy
//當1件時,點擊移除
if (num == 1) {
newList.splice(index, 1)
} else {
num--
newList[index].num = num
}
// 把新的數組傳給前臺
that.setData({
buy: newList
})
//調用計算數目方法
that.countNum()
// 計算金額
that.count()
},

7.單選商品,結算金額


change: function (e) {
var that = this
//得到下標
var index = e.currentTarget.dataset.index
//得到選中狀態
var select = e.currentTarget.dataset.select
console.log(e.currentTarget.dataset.select);
if (select == "circle") {
var stype = "success"
} else {
var stype = "circle"
}
//把新的值給新的數組
var newList = that.data.buy
newList[index].select = stype
//把新的數組傳給前臺
that.setData({
buy: newList
})
//調用計算數目方法
that.countNum()
//計算金額
that.count()
},

8.全選商品,并結算金額



全選

//全選
allSelect: function (e) {
var that = this
//先判斷現在選中沒
var allSelect = e.currentTarget.dataset.select
var newList = that.data.buy
if (allSelect == "circle") {
//先把數組遍歷一遍,然后改掉select值
for (var i = 0; i < newList.length; i++) {
newList[i].select = "success"
}
var select = "success"
} else {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "circle"
}
var select = "circle"
}
that.setData({
buy: newList,
allSelect: select
})
//調用計算數目方法
that.countNum()
//計算金額
that.count()
},

希望有興趣的朋友一起討論,一起切磋,歡迎交流 QQ:(1920459934)?
歡迎進入我的github瀏覽 ? ?

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92181.html

相關文章

  • 信小程序--(與唯品會來場紅色邂逅 ???)

    摘要:微信小程序之與唯品會來場粉紅色的邂逅買買買,雖然雙十二剛過,可是唯品會的折扣卻是依然火爆。一打開頁面,便是粉色的主頁映入眼簾,琳瑯滿目的商品,讓我這個月光族過了把眼癮。 Welcome to miaomiaoXiongs segmentfault 微信小程序之--(與唯品會來場粉紅色的邂逅 ???) 買買買,雖然雙十二剛過,可是唯品會的折扣卻是依然火爆。一打開頁面,便是粉色的主頁映入...

    SnaiLiu 評論0 收藏0
  • 信小程序--(與唯品會來場紅色邂逅 ???)

    摘要:微信小程序之與唯品會來場粉紅色的邂逅買買買,雖然雙十二剛過,可是唯品會的折扣卻是依然火爆。一打開頁面,便是粉色的主頁映入眼簾,琳瑯滿目的商品,讓我這個月光族過了把眼癮。 Welcome to miaomiaoXiongs segmentfault 微信小程序之--(與唯品會來場粉紅色的邂逅 ???) 買買買,雖然雙十二剛過,可是唯品會的折扣卻是依然火爆。一打開頁面,便是粉色的主頁映入...

    roadtogeek 評論0 收藏0
  • 記錄一下自己春招,唯品會、360、京東offer已收、騰訊offer_call已達!!!

    摘要:春招結果五月份了,春招已經接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底,截止今天,已經斬獲唯品會電商前端研發部大數據與威脅分析事業部京東精銳暑假實習生的騰訊的是早上打過來的。 春招結果 五月份了,春招已經接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底,截止今天,已經斬獲唯品...

    freewolf 評論0 收藏1
  • 構建與定制:唯品會 PaaS 基于 Kubernetes 實踐

    摘要:基于年底或年初沒有推廣的現狀,唯品會部門目前已經做了兩年的時間。唯品會現狀唯品會目前線上有一千多個域,每個域之間相互的依賴比較復雜,每次的部署發布困難。這是唯品會的架構,主要包含持續集成和持續部署。 數人云上海&深圳兩地容器之Mesos/K8S/Swarm三國演義的嘉賓精彩實錄第三更來啦。唯品會是數人云Meetup的老朋友,去年曾做過RPC服務框架和Mesos容器化的分享。本次分享中,...

    JackJiang 評論0 收藏0
  • 拒信收割機の前端面經(CVTE,唯品會,百度)

    摘要:另外回答的時候要淡定,一些問題就算不懂也不能慌,要和面試官談笑風生,然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎思維和潛力。 —— 雖然我的offer少,但是我的拒信多啊 這幾天終于閑下來,做一點微小的工作,整理了一些之前幾家公司的前端面試題和個人經驗,想做前端的師弟妹可以參考,也歡迎各同行大神來指教~ (以下問題不分先后,時間久遠難免有些遺漏;很多問題面試官都...

    yzd 評論0 收藏0

發表評論

0條評論

tianlai

|高級講師

TA的文章

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