本文介绍了一个使用BUI框架实现的电商应用案例，包括轮播图展示、列表刷新加载、Tab菜单项切换等功能，并展示了具体的JS代码实现细节。
js部分：
/**
*BUI 轮播图展示、列表刷新及加载、 Tab菜单项左右切换、2 x 4菜单项
*/
loader.define(function (require, exports, module) {
var pageview = {},
uiList, // 列表控件
uiPullRefreshs; //下拉刷新控件
// 事件绑定
pageview.bind = function () {
// 初始化页面的链接跳转
bui.btn({ id: "#page", handle: ".bui-btn" }).load();
}
// 模块初始化定义
pageview.init = function () {
// 初始化热门列表刷新加载
uiList = bui.list({
id: "#scrollListHome",
url: "http://120.78.191.175/vue_php/pingduoduoHomeListData.php",
data: {
"act": "get",
"page": 1
},
pageSize: 5,
field: {
page: "page", // 分页字段
size: "pageSize", // 页数字段
data: "" // 数据
},
template: templateListHome,
onRefresh: function (scroll) {
//刷新的时候执行
},
onLoad: function (scroll) {
// 自定义渲染
// console.log(scroll)
// console.log("page:"+ this.option("page") );
},
callback: function (e) {
// 点击单行回调 console.log($(this).text())
}
});
// 初始化男装列表刷新加载
uiList = bui.list({
id: "#scrollHomeManList",
url: "http://120.78.191.175/vue_php/pingduoduoHomeListData.php",
data: {
"act": "getmanall",
"page": 1
},
pageSize: 10,
field: {
page: "page", // 分页字段
size: "pageSize", // 页数字段
data: "" // 数据
},
template: templateListMan,
onRefresh: function (scroll) {
//刷新的时候执行
},
onLoad: function (scroll) {
// 自定义渲染
// console.log(scroll)
// console.log("page:"+ this.option("page") );
},
callback: function (e) {
// 点击单行回调 console.log($(this).text())
}
});
// 示例数据,正常由请求返回
var dataxiebao = [
{
name: "女鞋",
icon: "",
color: "btn-blue"
},
{
name: "男鞋",
icon: "",
color: "btn-red"
},
{
name: "箱包皮具",
icon: "",
color: "btn-orange"
},
{
name: "凉鞋",
icon: "",
color: "btn-green"
},
{
name: "拖鞋",
icon: "",
color: "btn-green"
},
{
name: "皮鞋",
icon: "",
color: "btn-orange"
},
{
name: "低帮鞋",
icon: "",
color: "btn-thinblue"
},
{
name: "双肩包",
icon: "",
color: "btn-blue"
},
{
name: "配饰",
icon: "",
color: "btn-thinblue"
},
{
name: "查看全部",
icon: "",
color: "btn-blue"
}
];
var listTplXiebao = templateListxiebao(dataxiebao);
// $渲染
$("#listXiebao").html(listTplXiebao);
// 绑定页面事件
this.bind();
}
// 声明男装菜单项列表模板
var templateListxiebao = function (data) {
var html = '';
data.forEach(function (el, index) {
html += ' <li class="bui-btn bui-box-vertical span3">';
html += ' <div class="icons-round '+el.color+'">';
html += ' <i class="icon">' + el.icon + '</i>';
html += ' </div>';
html += ' <div class="span1">' + el.name + '</div>';
html += ' </li>';
})
return html;
}
//生成热门列表的模板
function templateListHome(data) {
console.log(data)
var html = "";
$.each(data, function (index, el) {
html += '<li class="bui-btn bui-box-vertical" style="">';
html += ' <div class="thumbnail span1" style="background-image:url(' + el.src + ');background-repeat: no-repeat;background-size:100% 100%;"><div class="list-get-one-aword"><span></span><div class="list-get-one-aword-text">一分抽大奖</div></div></div>';
html += ' <div style="height:38px;margin-top:0.2rem;"><h3 class="item-title">' + el.name + '</h3></div>';
html += ' <div class="" style="height:30px;width:100%;">';
html += ' <div class="bui-box" style="width:100%;height:40px;">';
html += ' <div style="color:red; font-size: 0.28rem;width:57px;">￥0.01</div>';
html += ' <div class="span1" style="color:#999; font-size: 0.17rem;margin-top:0.08rem;">单卖价' + el.price + '元</div>';
html += ' <div class="goToPinBtn">去拼单 <i class="icon-next"></i> </div>';
html += ' </div>';
html += ' </div> ';
html += '</li>';
});
return html;
};
//生成男装等其他菜单内容列表的模板
function templateListMan(data) {
console.log(data)
var html = "";
$.each(data, function (index, el) {
html += '<li class="bui-btn bui-box-vertical span3" >';
html += ' <div class=" span1" style="background-image:url(' + el.src + ');background-repeat: no-repeat;background-size:99% 99%;"></div>';
html += ' <div style="height:0.6rem;line-height:0.28rem;margin-top:0.2rem;padding:0 0.08rem 0 0.08rem;"><h3 class="item-title-man">' + el.name.substr(0, 22) + '</h3></div>';
html += ' <div class="" style="height:0.6rem;width:100%;position: relative;">';
html += ' <div class="bui-box" style="width:100%;height:40px;">';
html += ' <div style="color:red; margin-left:0.08rem;font-size: 0.18rem;width:57px;margin-bottom:0.15rem;">￥<span style="font-size: 0.28rem;">' + el.price + '</span></div>';
html += ' <div class="man-nums-list" style="color:#999; font-size: 0.17rem;margin-top:0.08rem;">已拼' + el.nums + '件</div>';
html += ' </div>';
html += ' </div> ';
html += '</li>';
});
return html;
};
// 实例化轮播图
var uiSlidePics = bui.slide({
id: "#slidePics",
height: 200,
zoom: true,
autoplay: true
})
// 热门二级菜单初始化
var uiSlideNav = bui.slide({
id: "#slideMene",
height: 310,
zoom: true
});
var uiSlideTab = bui.slide({
id: "#uiSlideTab",
menu: "#nav",
children: ".bui-tab-main > ul",
// 如果slide 里面有 bui.list 则 scroll 不需要设置
scroll: true
});
// 让顶部导航滚动到可视位置
uiSlideTab.on("to", function (index) {
var left = $("#nav li")[index].offsetLeft - 170;
document.getElementById("uiSlideNavbar").scrollLeft = left;
})
bui.ajax({
url: "http://120.78.191.175/vue_php/weibo.php",
data: {
"page": 1,
"act": "get"
}
}).then(function (res) {
// console.log(res)
// 声明列表模板
var templateList = function (data) {
var html = '';
data.forEach(function (el, index) {
html += '<li class="bui-btn">' + el.content + '</li>';
})
return html;
}
var listTpl = templateList(res);
// $渲染
$("#homeList").html(listTpl);
}, function (res, status) {
console.log(status);
// status = "timeout" || "error" || "abort", "parsererror"
})
// 初始化
pageview.init();
// 输出模块
module.exports = pageview;
})HTML部分：
<!-- 这里还是一个标准的BUI页面 -->
<div class="bui-page">
<header class="bui-bar">
<div id="uiSlideNavbar" class="bui-navbar">
<ul id="nav" class="bui-nav">
<li class="bui-btn active">热门</li>
<li class="bui-btn">男装</li>
<li class="bui-btn">鞋包</li>
<li class="bui-btn">手机</li>
<li class="bui-btn">电器</li>
<li class="bui-btn">食品</li>
<li class="bui-btn">电脑</li>
<li class="bui-btn">百货</li>
<li class="bui-btn">服饰</li>
<li class="bui-btn">汽车</li>
<li class="bui-btn">家装</li>
<li class="bui-btn">运动</li>
<li class="bui-btn">母婴</li>
<li class="bui-btn">水果</li>
<li class="bui-btn">内衣</li>
<li class="bui-btn">家纺</li>
<li class="bui-btn">美妆</li>
</ul>
</div>
</header>
<main>
<!-- 中间内容 -->
<div id="uiSlideTab" class="bui-tab">
<div class="bui-tab-main">
<ul>
<li>
<div id="scrollListHome" class="bui-scroll news-list">
<div class="bui-scroll-head">
</div>
<div class="bui-scroll-main">
<!-- 这里是滚动的内容区,如果不是ul,则需要修改对应的参数 -->
<ul>
<li>
<!-- 轮播图 -->
<div id="slidePics" class="bui-slide" style="width: 100% !important;">
<div class="bui-slide-main">
<ul id="slidePicsHome">
<li>
<div style="width:92.7%;height: 100%;">
<img src="http://oy9t2t0un.bkt.clouddn.com/banner1.jpg" />
</div>
<div class="bui-slide-title" style="width:92.7%;">温柔呵护你的肌肤</div>
</li>
<li></li>
...
</ul>
</div>
<div class="bui-slide-head" style="margin-right: 0.4rem">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<div id="slideMene" class="bui-slide slide-nav">
<div id="slidemain" class="bui-slide-main slide-nav-main">
<ul>
<li>
<ul class="index-nav bui-fluid-space">
<li class="bui-btn bui-box-vertical span3">
<div class="icons-round btn-blue">
<i class="icon"></i>
</div>
<div class="span1">限时秒杀</div>
</li>
<li></li>
...
</ul>
</li>
<li>
<ul class="index-nav bui-fluid">
<li class="bui-btn bui-box-vertical span3">
<div class="icons-round btn-blue">
<i class="icon"></i>
</div>
<div class="span1">1分抽大奖</div>
</li>
<li class="bui-btn bui-box-vertical span3">
<div class="icons-round btn-red">
<i class="icon"></i>
</div>
<div class="span1">转盘领现金</div>
</li>
<li></li>
...
</ul>
</li>
</ul>
</div>
<div class="bui-slide-head">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="ab_pic_tip">
<img src="http://pdm1vp1l4.bkt.clouddn.com/pingduoduo-home.jpg" />
</div>
</li>
</ul>
<!--首页列表循环部分-->
<!--如何在bui.list 列表部分写不是列表循环出来的内容
不要：class="bui-list"是我们自定义的部分，如轮播图，活动简介...
<ul>
<li></li>
</ul>
要：class="bui-list" 是我们从数据库读出来的内容，进行下拉刷新，上拉加载更多
<ul class="bui-list">
<li></li>
</ul>
-->
<ul class="bui-list">
</ul>
</div>
<div class="bui-scroll-foot"></div>
</div>
</li>
<!-- 男装 -->
<li>
<div id="scrollHomeManList" class="bui-scroll">
<div class="bui-scroll-head"></div>
<div class="bui-scroll-main">
<!--注意这里-->
<ul class="">
<li>
<div id="slideMan" class="bui-slide slide-nav" style=" height: 2.2rem !important;">
<div id="slideManmain" class="bui-slide-main ">
<ul>
<li>
<ul id="listNanzhuang" class="index-man-nav bui-fluid-space">
</ul>
</li>
</ul>
</div>
</div>
<div class="ab_pic_tip_man">
<img style="width:100%;" src="http://pdm1vp1l4.bkt.clouddn.com/image/jpg/223888nanzhuan.jpg" />
</div>
</li>
</ul>
<!--注意这里-->
<ul class="index-nav-man-list bui-fluid bui-list">
</ul>
</div>
<div class="bui-scroll-foot"></div>
</div>
</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
</ul>
</div>
</div>
</main>
</div>css样式部分：
<style>
.home-list li {
width: 100%;
height: 150px;
background-color: #fff;
border-bottom: 5px solid #f3f3ff;
}
.bui-slide .bui-slide-head {
bottom: 0;
}
/* 菜单项 */
.slide-nav {
margin-bottom: .16rem;
background-color: #f5f5f5;
height: 3.0rem !important;
width: 100% !important;
}
.slide-nav .bui-btn {
border: 0;
}
.slide-nav .icons-round {
width: 0.6rem;
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
/*background: #01a5e4;*/
border-radius: .15rem;
margin: 0.10rem auto;
}
.slide-nav .icons-round i {
font-size: 0.4rem;
color: #fff;
margin: 0;
}
.slide-nav .span1 {
margin-bottom: 0.08rem;
}
.slide-nav .bui-slide-head {
text-align: center;
background: rgb(255, 255, 255);
width: 100%;
height: 0.4rem;
}
/* 轮播指示器按钮 */
.bui-slide .bui-slide-head ul li {
float: none;
display: inline-block;
background: #0072c5;
width: 0.17rem;
height: 0.17rem;
line-height: 0.18rem;
margin-bottom: 0.1rem;
}
/* 顶部滚动按钮 */
.index-nav {
background-color: #fff;
padding-top: -0.01rem;
}
.index-nav li {
width: 23% !important;
}
.index-nav .span1 {
font-size: 0.18rem;
}
.slide-nav-main ul {
height: 3.3rem;
}
.slide-nav-main ul li {
扫一扫
2503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
