微信小程式-高仿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有一定的基礎,還有對微信小
在應用中顯示的圖片很多情況不滿足業務需求,我們需要動態根據圖片的寬高進行縮放或載入中顯示的預設圖片,這是我沒就需要監聽圖片載入完成回撥,來看看微信小程式怎麼實現圖片載入完成回撥。
<swiper-item> <image src="{{item.image}}" class="slide-image" mode="widthFix" @tap="bannerjump({{item.l
使用高德地圖微信小程式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