1. 程式人生 > >微信小程式-高仿vivo商城

微信小程式-高仿vivo商城

var json = require('../../data/Home_data.js')

Page({
  data: {
    cartItems:[],
    total:0,
    CheckAll:true
  },
  onLoad:function(e){
    
  },
   onShow: function () {
     var cartItems = wx.getStorageSync("cartItems")
     this.setData({
       cartList: false,
       cartItems: cartItems
     })
     this.getsumTotal()
     
   },

  //選擇
   select:function(e){
    var CheckAll = this.data.CheckAll;
    CheckAll = !CheckAll
    var cartItems = this.data.cartItems

    for(var i=0;i<cartItems.length;i++){
      cartItems[i].selected = CheckAll
    }

    this.setData({
      cartItems: cartItems,
      CheckAll: CheckAll
    })
    this.getsumTotal()
   },
   add:function (e) {
     var cartItems = this.data.cartItems   //獲取購物車列表 var index = e.currentTarget.dataset.index //獲取當前點選事件的下標索引 var value = cartItems[index].value  //獲取購物車裡面的value值
     
     value++
     cartItems[index].value = value;
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     
     wx.setStorageSync("cartItems", cartItems)  //存快取
   },
   
    //減
   reduce: function (e){
     var cartItems = this.data.cartItems  //獲取購物車列表 var index = e.currentTarget.dataset.index  //獲取當前點選事件的下標索引 var value = cartItems[index].value  //獲取購物車裡面的value值 if(value==1){
       value --
       cartItems[index].value = 1
     }else{
       value --
       cartItems[index].value = value;
     }
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },
  
    // 選擇
   selectedCart:function(e){
     
    var cartItems = this.data.cartItems   //獲取購物車列表 var index = e.currentTarget.dataset.index;  //獲取當前點選事件的下標索引 var selected = cartItems[index].selected;    //獲取購物車裡面的value值 //取反
    cartItems[index].selected =! selected;
    this.setData({
      cartItems: cartItems
    })
    this.getsumTotal();   
    wx.setStorageSync("cartItems", cartItems)
   },

  
   

   //刪除
   shanchu:function(e){
     var cartItems = this.data.cartItems  //獲取購物車列表 var index = e.currentTarget.dataset.index  //獲取當前點選事件的下標索引
     cartItems.splice(index,1)
     this.setData({
       cartItems: cartItems
     });
     if (cartItems.length) {
       this.setData({
         cartList: false
       });
     }
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },

      //提示
   go:function(e){
     this.setData({
       cartItems:[]
     })
     wx.setStorageSync("cartItems", [])
   },


   //合計
   getsumTotal: function () {
     var sum = 0 for (var i = 0; i < this.data.cartItems.length; i++) {
       if (this.data.cartItems[i].selected) {
         sum += this.data.cartItems[i].value * this.data.cartItems[i].price
       }
     }
     //更新資料 this.setData({
       total: sum
     })
   },
})

相關推薦

程式-仿vivo商城

var json = require('../../data/Home_data.js') Page({ data: { cartItems:[], total:0, CheckAll:true }, onLoad:function(e){ }, o

程式仿淘寶分類入口 —— 程式實戰商城系列(2)

分類入口,已經成為了商城專案必須的佈局之一,這裡以仿照淘寶的分類入口來做案例 下圖紅框部分,就是本文重點講解部分,另外本文並沒有寫點選某個入口跳轉頁面。 如需學習頁面跳轉的同學,可以參考此文 頁

程式開發之小米商城(一)

小程式開發之小米商城Lite 剛接觸小程式不久,感覺相對來說比較簡單,就自己花了五六天做了一個專案,因為本身也是米粉,就看中了小米的微信小程式(可憐國慶擼了幾天的程式碼,哈哈),話不多說,先上效果圖吧。 算了算了。本來還打算上gif圖,但是太難搞了,說明一下吧。

程式仿android fragment之可滑動的底部導航欄例項 —— 程式實戰系列(4)

底部3-5個選項的底部導航欄,目前在移動端上是主流佈局之一 因此騰訊官方特地做了,可以通過設定,就可以做出了一個底部的導航欄 但是通過設定的這個底部的導航欄,功能上比較固定,它必須要設定與它對應的一個頁面,而且並不能滑動。 在業務上,有時候會比較限制,並不能完全滿足所需

程式開發-仿今日頭條(二)

(本小程式是模仿新聞類的app做的一個小程式) 在此特別感謝: 有夢想的程式丶猿 提供的免費開放介面API 本次版本更新內容如下:v0.0.38

程式---德地圖API

本文章介紹微信小程式呼叫高德地圖API的過程,使用高德定位功能做演示。 微信小程式目前支援百度地圖、高德地圖、騰訊地圖。用法可以說是基本完全一樣,本文章以高德為例,簡單說一下他們的區別,高德地圖精度應該是最準確的,畢竟本來就是做地圖出生的。百度地圖的精度目前較高德而言,還是要稍稍欠缺一

基於程式的校園二手商城設計與開發

時間過得可真快啊,轉眼間大學四年就結束了,人總是到了要分別的時候才懂得去懷念過去啊。前段時間弄完了畢業論文,最近在導師實驗室搬磚,一直沒時間整理,今天終於有時間,所以想把畢設給整理一下,首先宣告這個畢設做的很一般哈,給大家樂一下,也算是送給自己的畢業禮物吧正文如下:軟體功能及

程式實戰-仿盒馬鮮生

盒馬鮮生是阿里巴巴對線下超市完全重構的新零售業態,熱度十分 專案功能 * 使用者資訊註冊 * 首頁幾個輪播和介面互動 * 分類商品管理購買 * 購物車介面互動及其操作 * 個人資訊介面 小程式設計過程 小程式是一個易上

程式日記——仿知乎日報(上)

該小程式的作者是Oopsguy,我也參與小功能的開發和完善,希望大家能支援一下 本人對知乎日報是情有獨鍾,看我的部落格和github就知道了,寫了幾個不同技術型別的知乎日報APP 要做微信小程式首先要對html,css,js有一定的基礎,還有對微信小

使用德地圖程式SDK開發案例-輸入提示(附原始碼)

閒來無事寫一篇使用高德地圖的微信小程式SDK開發應用的例項。 接下來先看需求: 我們要做的是,根據使用者輸入的關鍵詞,給出相應的提示資訊,列表中顯示地方的名稱,地方的詳細地址以及對應的經緯度座標。 當然在UI上我們儘量做到理想的視覺與較好的使用者體驗。 最終的效果我們希望是像這樣的,

Wuss Weapp 一款質量,元件齊全,自定義的程式 UI 元件庫

Wuss Weapp 一款高質量,元件齊全,高自定義的微信小程式 UI 元件庫 文件 https://phonycode.github.io/wuss-weapp 掃碼體驗 使用微信掃一掃體驗小程式元件示例 演示圖片 快速上手 在開始使用 Wuss We

程式的搜尋亮、自定義導航條等踩坑記錄

原文地址:https://oomabc.com/articledetail?atclid=7421fe13daad46389791463f51d3395d   前言我在寫這個部落格的小程式過程中,遇到了很多的問題。之前斷斷續續也寫過不少JavaScript和css,不過都是半吊子。所以在看了一會

程式德API-PoI地址搜尋

在開始開發前有幾步必要步驟: 1.進入高德地圖API官網,登陸,開發支援-微信小程式SDK,控制檯,應用管理,建立開發需要的key。注意:服務平臺,必須是微信小程式。key用於什麼開發就建立什麼平臺Key。 2.下載 amap-wx.js開發包,https://lbs.amap

程式德API之定位。

在開始開發前有幾步必要步驟: 1.進入高德地圖API官網,登陸,開發支援-微信小程式SDK,控制檯,應用管理,建立開發需要的key。注意:服務平臺,必須是微信小程式。key用於什麼開發就建立什麼平臺Key。 2.下載 amap-wx.js開發包,https://lbs.amap

程式商城構建全棧應用

ThinkPHP5.0打造一個微信小程式商城 ThinkPHP5.0             TP5三大核心:路由、控制器、模型             以ORM的方式

程式設定寬100%不起作用

小程式的啟動頁圖片是要鋪滿全屏的,我們考慮設定寬高都是100%但是並沒有起作用 .start { width: 100%;    height: 100%; }

程式商城功能齊全定製開發

微笑暖人心,真情待客戶!山東帝雲資訊科技誠心×××,業務諮詢請找▍馬一13、4-06、99-08、27微/電 ▍淘寶京東盤踞電商行業十幾年,有成熟的體制,我的產品只用在線上傳就可以輕易上線銷售。我直接在淘寶,京東開店不好嗎?不容懷疑,淘寶和京東都是天然的流量池,對於企業短時間獲利有很大的好處,那為什

5個質量的程式推薦,實用性槓槓的,趕快收藏起來吧!

1.果核app 免費提供各種小技巧,其中包含了Mac入門必讀,手機攝影指南,How To等等,可以幫你更好的玩轉iPhone,iPad。 2.網盤庫 一款資源搜尋小程式,介面是十分簡潔的,包含了影視、音樂、視訊等,想看什麼都可以直接搜尋。 3.胖次工具箱 一款彙集各種實用小工具的小程式。包括截圖拼接

-齊梟飛前端架構師 程式--仿 QQ左劃事件--

廢話不多說,直接上程式碼: js: var app = getApp() Page({ data: { items: [], startX: 0, //開始座標 startY: 0 }, onLoad: func