2016-11-29 17:09:31 天下雪原创达人 造轮子 人生巅峰 楼主 11012356
点评:正是大家需要的类似锚点功能,另外也实现了一些外卖app的典型点菜功能,推荐学习研究;




代码示例:
[AppleScript] 纯文本查看 复制代码
var app = getApp();
var server = require('../../utils/server');
Page({
	data: {
		goods: {
			1: {
				id: 1,
				name: '娃娃菜',
				pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
				sold: 1014,
				price: 2
			},
			2: {
				id: 2,
				name: '金针菇',
				pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
				sold: 1029,
				price: 3
			},
			3: {
				id: 3,
				name: '方便面',
				pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
				sold: 1030,
				price: 2
			},
			4: {
				id: 4,
				name: '粉丝',
				pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
				sold: 1059,
				price: 1
			},
			5: {
				id: 5,
				name: '生菜',
				pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
				sold: 1029,
				price: 2
			},
			6: {
				id: 6,
				name: '白菜',
				pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
				sold: 1064,
				price: 2
			},
			7: {
				id: 7,
				name: '杏鲍菇',
				pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
				sold: 814,
				price: 3
			},
			8: {
				id: 8,
				name: '香菇',
				pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
				sold: 124,
				price: 3
			},
			9: {
				id: 9,
				name: '猴头菇',
				pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
				sold: 102,
				price: 5
			}
		},
		goodsList: [
			{
				id: 'hot',
				classifyName: '热销',
				goods: [1, 2, 3, 4, 5]
			},
			{
				id: 'new',
				classifyName: '新品',
				goods: [1, 3]
			},
			{
				id: 'vegetable',
				classifyName: '蔬菜',
				goods: [1, 6, 5]
			},
			{
				id: 'mushroom',
				classifyName: '蘑菇',
				goods: [2, 7, 8, 9]
			},
			{
				id: 'food',
				classifyName: '主食',
				goods: [3, 4]
			}
		],
		cart: {
			count: 0,
			total: 0,
			list: {}
		},
		showCartDetail: false
	},
	onLoad: function (options) {
		var shopId = options.id;
		for (var i = 0; i < app.globalData.shops.length; ++i) {
			if (app.globalData.shops[i].id == shopId) {
				this.setData({
					shop: app.globalData.shops[i]
				});
				break;
			}
		}
	},
	onShow: function () {
		this.setData({
			classifySeleted: this.data.goodsList[0].id
		});
	},
	tapAddCart: function (e) {
		this.addCart(e.target.dataset.id);
	},
	tapReduceCart: function (e) {
		this.reduceCart(e.target.dataset.id);
	},
	addCart: function (id) {
		var num = this.data.cart.list[id] || 0;
		this.data.cart.list[id] = num + 1;
		this.countCart();
	},
	reduceCart: function (id) {
		var num = this.data.cart.list[id] || 0;
		if (num <= 1) {
			delete this.data.cart.list[id];
		} else {
			this.data.cart.list[id] = num - 1;
		}
		this.countCart();
	},
	countCart: function () {
		var count = 0,
			total = 0;
		for (var id in this.data.cart.list) {
			var goods = this.data.goods[id];
			count += this.data.cart.list[id];
			total += goods.price * this.data.cart.list[id];
		}
		this.data.cart.count = count;
		this.data.cart.total = total;
		this.setData({
			cart: this.data.cart
		});
	},
	follow: function () {
		this.setData({
			followed: !this.data.followed
		});
	},
	onGoodsScroll: function (e) {
		if (e.detail.scrollTop > 10 && !this.data.scrollDown) {
			this.setData({
				scrollDown: true
			});
		} else if (e.detail.scrollTop < 10 && this.data.scrollDown) {
			this.setData({
				scrollDown: false
			});
		}

		var scale = e.detail.scrollWidth / 570,
			scrollTop = e.detail.scrollTop / scale,
			h = 0,
			classifySeleted,
			len = this.data.goodsList.length;
		this.data.goodsList.forEach(function (classify, i) {
			var _h = 70 + classify.goods.length * (46 * 3 + 20 * 2);
			if (scrollTop >= h - 100 / scale) {
				classifySeleted = classify.id;
			}
			h += _h;
		});
		this.setData({
			classifySeleted: classifySeleted
		});
	},
	tapClassify: function (e) {
		var id = e.target.dataset.id;
		this.setData({
			classifyViewed: id
		});
		var self = this;
		setTimeout(function () {
			self.setData({
				classifySeleted: id
			});
		}, 100);
	},
	showCartDetail: function () {
		this.setData({
			showCartDetail: !this.data.showCartDetail
		});
	},
	hideCartDetail: function () {
		this.setData({
			showCartDetail: false
		});
	},
	submit: function (e) {
		server.sendTemplate(e.detail.formId, null, function (res) {
			if (res.data.errorcode == 0) {
				wx.showModal({
					showCancel: false,
					title: '恭喜',
					content: '订单发送成功!下订单过程顺利完成,本例不再进行后续订单相关的功能。',
					success: function(res) {
						if (res.confirm) {
							wx.navigateBack();
						}
					}
				})
			}
		}, function (res) {
			console.log(res)
		});
	}
});


项目地址及下载:
https://github.com/RhineLiu/a-takeaway-demo-of-wxapp
a-takeaway-demo-of-wxapp-master.zip (108.18 KB, 下载次数: 2475)
分享至 : QQ空间
16 人收藏
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
2016-11-29 17:14:20 海洋 攻城狮
沙发
好好好好好佛啊好好哦啊好
好东西啊,必须要好好支持下
2016-11-29 18:01:30 Hiamigo 架构狮
地板
6666666666666666
2016-11-29 18:17:31 Zero 架构狮
5#
赞赞赞!!
很不错啊
2016-11-29 23:18:06 turui 架构狮
7#
学习好远嘛
外卖商城
2016-11-30 09:25:13 lansu 诠释者
9#
牛逼牛逼,看看看看
2016-11-30 11:21:54 hailakeji 架构狮
10#
??????????????
好的啊
2016-11-30 14:15:49 herren 架构狮
12#
这个很给力          真给力         
66666666666666666

评分

参与人数 1浮云 +10 收起 理由
天下雪 + 10 赞一个!

查看全部评分

2016-11-30 17:12:38 suxiongwei 架构狮
14#
dasdasdasdasd
2016-11-30 21:42:42 yomifan 攻城狮
15#
厉害了,谢谢
发新帖
您需要登录后才可以回帖 登录 | 立即注册