5+App下Mui框架开发仿拼多多App
一、整体项目介绍说明
“拼多多”App+移动电商管理平台项目是我在专业实训时参加的项目开发，App端高度仿造“拼多多”App完成，我在项目中也主要负责App端的实现。由于App端是由我和另一位同学一起开发完成，为了报护他人成果，这里我主要介绍我完成的部分——App首页、分类、商品下单购买、搜索、历史浏览、活动促销等页面。
由于部分页面之间联系紧密，页面间逻辑性强，直接运行代码可能报错，但我会分页面重点说明下我在开发时遇到的问题，希望对大家有所帮助。
二、页面展示
三、页面实现主要技术和难点
开发时，数据都是前端先写死的，用死数据先把前端的框架布局实现，到后来后台有数据之后，直接请求数据在页面挂载即可，这也是我觉得比较高效的前后端分离开发的方式。
App端首页顶部可滑动导航栏和自动播放（可手动滑动）首页广告区都是利用的mui组件实现的。还算简单，我觉得首页最难实现的就是两行可滑动功能区，利用css样式的flex弹性盒子实现。其他功能实现就相对来说容易些
我觉得做前端开发这块，一定要多想，多做，脑子里有实现想法，一定要敲出来运行看结果，不要大概想想感觉实现不了，就打退堂鼓了，不运行下，怎么知道不行呢。所以，一定要开动脑筋多想、多做。
四、关键代码讲解
可滑动导航及点击事件处理实现完整代码
//获取顶部导航数据并挂载到页面
//首页逻辑：进入app后，顶部导航处在热门区，点击其他导航，请求数据挂载在首页，实现页面内跳转功能
let getNav = {
version: "v1.0",
author: "wmyang",
getNavInfo: function() {
var htmlContentWhole = "";
htmlContentWhole =
`
<div id="advertisement" class="imgbox">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
</div>
<div class="mui-slider-indicator">
</div>
</div>
</div>
<div id="functionarea"></div>
<div id="huodong">
<span id="huodong-title">
<img src="./img/huodong.png" />
<strong id="baiyibutie">活动商品</strong>
<span id="dapaizhengpin">|总有一件商品让你心动</span>
<span id="more">查看更多></span>
</span>
<div id="huodong-content">
</div>
</div>
<div id="item-list"></div>`;
$(".mui-content").html(htmlContentWhole);
$.ajax({
url: "http://39.98.158.247:8040/navigate/get/top",
dataType: "json",
success: function(data) {
// console.log(data);
if (data.status == "success") {
console.log(data);
let htmlContent = "";
let first_nav_name = data.data[0].top_button_name;
htmlContent +=
`<a href="#content" class="mui-control-item mui-active" id="${data.data[0].top_button_name}">${data.data[0].top_button_name}</a>`;
for (var i = 1; i < data.data.length; i++) {
if (data.data[i].top_button_status == 1) {
htmlContent +=
`<a href="#content" class="mui-control-item" id="${data.data[i].top_button_name}">${data.data[i].top_button_name}</a>`;
}
}
$(".mui-scroll").html(htmlContent);
//点击热门出现首页内容
document.getElementById(first_nav_name).addEventListener('tap', function() {
htmlContentWhole =
`
<div id="advertisement" class="imgbox">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
</div>
<div class="mui-slider-indicator">
</div>
</div>
</div>
<div id="functionarea"></div>
<div id="huodong">
<span id="huodong-title">
<img src="./img/活动.png"/>
<strong id="baiyibutie">活动商品</strong>
<span id="dapaizhengpin">|总有一件商品让你心动</span>
<span id="more">查看更多></span>
</span>
<div id="huodong-content">
</div>
</div>
<div id="item-list"></div>`;
$(".mui-content").html(htmlContentWhole);
getAd.getAdInfo();
getFunction.getFunctionInfo();
getPromo.getPromoInfo();
getItem.getItemInfo();
getBottomNav.getBottomNavInfo();
})
// 为首页其他顶部导航设置点击事件
//点击事件包括，点击对应导航得到对应商品列表，点击商品列表进入商品详情页
for (var j = 1; j < data.data.length; j++) {
let nav_id = data.data[j].top_button_name;
document.getElementById(nav_id).addEventListener('tap', function() {
//console.log(this.id);
let category = this.id;
$.ajax({
type: "GET",
url: "http://39.98.158.247:8040/item/category/first",
data: {
category: category
},
success: function(data) {
//console.log(data);
htmlContentWhole =
`<div id="item-list-nav">
</div>`
$(".mui-content").html(htmlContentWhole);
let htmlContentItem = ``;
for (var i = 0; i < data.data.length; i++) {
console.log(data.data[0].item_img);
htmlContentItem +=
`<div class="item"id="${i}" >
<img class="item-image" src="${data.data[i].item_img}"/>
<div class="item-content">
<span class="item-title">${data.data[i].item_name}</span>
<span class="item-shop">${data.data[i].item_brand}</span>
<span class="item-price">￥${data.data[i].item_price}</span>
<span class="item-sale">已售 ${data.data[i].item_sales} 件</span>
</div>
</div>`;
}
$("#item-list-nav").html(htmlContentItem);
for (var j = 0; j < data.data.length; j++) {
document.getElementById(j).addEventListener('tap', function() {
let itemId = data.data[this.id].item_id;
//console.log(itemId);
$.ajax({
type: "POST",
dataType: "json",
async: false,
contentType: "application/json",
url: "http://39.98.158.247:8040/browse/insert?userId=" + userId + "&itemId=" + itemId,
success: function() {
console.log("insert success");
},
error: function() {
console.log("request error");
}
})
window.open("search-item.html", "_blank");
localStorage.status = 1;
localStorage.dataset = JSON.stringify(data);
localStorage.id = this.id;
});
}
},
error: function() {
console.log("request error");
}
})
})
}
}
},
error: function() {
console.log("request error");
},
})
}
}
导航可滑动功能实现主要代码
<!-- 可滑动导航 -->
<div id="mynav" class="mui-scroll-wrapper mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
</div>
</div>
<!-- 可滑动导航 -->
let htmlContent = "";
let first_nav_name = data.data[0].top_button_name;
htmlContent +=
`<a href="#content" class="mui-control-item mui-active" id="${data.data[0].top_button_name}">${data.data[0].top_button_name}</a>`;
for (var i = 1; i < data.data.length; i++) {
if (data.data[i].top_button_status == 1) {
htmlContent +=
`<a href="#content" class="mui-control-item" id="${data.data[i].top_button_name}">${data.data[i].top_button_name}</a>`;
}
}
$(".mui-scroll").html(htmlContent);
mui('.mui-scroll-wrapper').scroll({
scrollY: false, //是否竖向滚动
scrollX: true, //是否横向滚动
deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
});
广告轮播图实现
//获取广告banner图，并实现轮播效果
let getAd = {
version: 'v1.0',
getAdInfo: function() {
$.ajax({
url: "http://39.98.158.247:8040/ad/get",
dataType: "json",
success: function(data) {
// console.log(data);
let length = data.data.length;
let htmlContent = "";
let htmlContent1 = "";
if (length == 1) {
$('.mui-slider-group').append('<div class="mui-slider-item"><img class="lunbo-img" src="' + data.data[0].ad_img +
'" /></div>');
} else {
$('.mui-slider-group').append(
'<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="' + data.data[
length - 1].ad_img + '" /></div>');
$('.mui-slider-indicator').append('<div class="mui-indicator mui-active"></div>');
for (var i = 0; i < length; i++) {
$('.mui-slider-group').append('<div class="mui-slider-item"><img class="lunbo-img" src="' + data.data[i]
.ad_img + '" /></div>');
}
$('.mui-slider-group').append(
'<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="' + data.data[0].ad_img +
'" /></div>');
for (var i = 0; i < length - 1; i++) {
$('.mui-slider-indicator').append('<div class="mui-indicator"></div>');
}
}
var gallery = mui('.mui-slider');
gallery.slider({
interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
});
},
error: function() {
console.log("request error");
}
})
}
}
可滑动功能区实现
//获取功能区数据
let getFunction = {
version: "v1.0",
author: "wmyang",
getFunctionInfo: function() {
$.ajax({
url: "http://39.98.158.247:8040/function/get",
dataType: "json",
success: function(data) {
// console.log(data);
if (data.status == "success") {
// console.log(data);
let htmlContent = "";
for (var i = 0; i < data.data.length; i++) {
htmlContent +=
`<div class="function-con">
<img class="function-img" src="${data.data[i].fun_button_icon}"/>
<p>${data.data[i].fun_button_name}</p>
</div>`
}
$("#functionarea").html(htmlContent);
}
},
error: function() {
console.log("request error");
},
})
}
}
实现功能区可滑动
#functionarea{
height:150px;
/* width:100%; */
display:flex;
flex-direction: column;
flex-wrap: wrap;
justify-content:space-around;
align-items: flex-start;
overflow-x: auto;
overflow-y: hidden;
border-bottom: 1px solid #e4e4e4;
text-align: center;
}
/*实现功能区布局效果主要代码
display:flex;
flex-direction: column;
flex-wrap: wrap;
justify-content:space-around;
align-items: flex-start;
*/
/*实现功能区左右滑动效果主要代码
overflow-x: auto;
overflow-y: hidden;
*/
扫一扫
1769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
