Page({
data: {
fixed: "", // 是否吸顶
tabIndex: "-1", // 当前navId,发送请求的参数
pageIndex: "", // 当前分页,发送请求的参数
category: "Home", // 当前nav,发送请求的参数
nextPage: "", // 下一个分页
scrollTop: "", // 自动滚动的距离
hidden: true, // 是否显示加载动画
tipShow: false, // 判断是否还有更多数据
bannerItems: [], // banner图片链接;
navItems: [], // 导航栏
bannerConfig: { // banner图配置信息
mode: "aspectFit",
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 500
},
activityUrls: [ // 四个模块图片链接
'http://m.ipinbb.com/ipbb/static/images/home-01.png',
"http://m.ipinbb.com/ipbb/static/images/home-02.png",
"http://m.ipinbb.com/ipbb/static/images/home-03.png",
"http://m.ipinbb.com/ipbb/static/images/home-04.png"
],
list: [] // 商品数据
},
onLoad: function(e) { // 首次加载
var self = this;
wx.request({ // 列表数据请求
url: 'http://m.ipinbb.com/ipbb/home/load?ti=-1&ft=Home',
header: {
'Content-Type': 'application/json'
},
success: function(res) {
var nextPage = JSON.stringify(res.data.nextPage),
resData = res.data.lst;
self.setData({ // 将数据与参数添加到到data中
hidden: true,
pageIndex: 1,
nextPage: nextPage,
list: self.data.list.concat(self.dataRead(resData))
});
},
fail: function(){
console.log("网络异常！");
}
});
wx.request({ // 导航栏数据请求;
url: 'http://service.ipinbb.com:8080/goodsService/getHomeTabs',
header: {
'Content-Type': 'application/json'
},
success: function(res) {
var navArr = [],
navData = res.data;
navData.forEach(function(item){ // 修改点击元素的高亮状态
var navObj = {};
navObj.category = item.tabFilterType;
navObj.tabIndex = item.tabId
navObj.text = item.tabName
console.log();
navObj.className = !item.tabSortType ? "" : "curNavigator";
navArr.push(navObj);
});
self.setData({
navItems: navArr
})
},
fail: function(){
console.log("网络异常！");
}
})
wx.request({ // banner图数据请求;
url: 'http://service.ipinbb.com:8080/goodsService/getHomeBanner',
header: {
'Content-Type': 'application/json'
},
success: function(res) {
// console.log(res);
var bannerArr = [],
bannerData = res.data.lst;
bannerData.forEach(function(item){
var bannerObj = {};
bannerObj.goodId = item.banner_goodsId;
bannerObj.imgUrl = item.banner_img;
bannerObj.platformId = item.banner_platformId;
bannerArr.push(bannerObj)
});
// console.log(bannerArr);
self.setData({
bannerItems: bannerArr
});
},
fail: function(){
console.log("网络异常！");
}
})
},
navLink: function(e) { // nav导航栏切换
var self = this,
dataObj = self.data,
obj = e.currentTarget.dataset,
tabIndex = obj.tabindex,
category = obj.category,
navArr = dataObj.navItems;
navArr.forEach(function(item){ // 去除上一个nav高亮状态,并给当前点击的添加高亮状态
var i = item.tabIndex;
if(i == tabIndex) {
item.className = "curNavigator";
} else {
item.className = "";
}
});
// console.log(navArr);
self.setData({ // 设置加载动画以及其他参数;
scrollTop: "321",
hidden: false,
tabIndex: tabIndex,
pageIndex: 0,
category: category,
nextPage: "",
navItems: navArr,
tipShow: false
});
// 分页的数据请求参数
var nextPage = dataObj.nextPage,
pageIndex = dataObj.pageIndex;
wx.request({ // nav导航栏切换数据请求;
url: 'http://m.ipinbb.com/ipbb/home/load',
data : {
nextPage : nextPage,
ti : tabIndex,
ft : category,
page : pageIndex
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
var resData = res.data.lst,
nextPage = JSON.stringify(res.data.nextPage);
// 将数据与参数添加到到data中
self.data.list = self.dataRead(resData);
self.setData({
hidden: true,
pageIndex: Number(pageIndex) + 1,
nextPage: nextPage,
list: self.data.list
});
}
});
},
scroolTop: function(e) { // nav导航栏居顶
if(e.detail.scrollTop >= 321) {
this.setData({
fixed: "fixed"
})
} else {
this.setData({
fixed: ""
})
}
},
downLoad: function(e) { // 上拉加载更多数据;
var self = this,
nextPage = self.data.nextPage,
category = self.data.category,
tabIndex = self.data.tabIndex,
tipShow = self.data.tipShow,
pageIndex = Number(self.data.pageIndex);
if(!tipShow) { // 判断是否存在更多数据
self.setData({ // 加载动画
hidden: false
});
wx.request({ // 发起请求
url: 'http://m.ipinbb.com/ipbb/home/load',
data : {
nextPage : nextPage,
ti : tabIndex,
ft : category,
page : pageIndex
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
if(res.data != null) {
var resData = res.data.lst,
nextPage = JSON.stringify(res.data.nextPage);
self.setData({ // 将数据与参数添加到到data中
hidden: true,
pageIndex: pageIndex + 1,
nextPage: nextPage,
list: self.data.list.concat(self.dataRead(resData))
});
} else {
self.setData({
hidden: true,
tipShow: true
})
}
},
fail: function(){
console.log("网络异常!");
}
});
}
},
dataRead: function(data) { // 数据提取;
var self = this, dataArr = [];
data.forEach(function(item){
var itemObj = {};
itemObj.goods_id = item.goods_id;
itemObj.goods_img = item.goods_img;
itemObj.goods_title = item.goods_title;
itemObj.goods_group_size = item.goods_group_size;
itemObj.goods_group_price = item.goods_group_price;
itemObj.goods_promote_info = item.goods_promote_info;
dataArr.push(itemObj);
});
return dataArr;
}
})
精品demo推荐：爱拼宝宝：导航固定在顶部，适用1122版本(源代码+截图).zip （49个子文件） 
精品demo推荐：爱拼宝宝：导航固定在顶部，适用1122版本 wechat-app-ipinbb-master image 
home_active.png 1KB user_active.png 2KB hot_active.png 1KB motherSaid.png 1007B search.png 2KB hot.png 1KB home.png 1KB user.png 2KB motherSaid_active.png 1011B search_active.png 2KB arrowright.png 1KB
app.json 2KB page eval eval.wxss 1KB eval.wxml 920B eval.js 3KB index index.js 7KB index.wxss 2KB index.wxml 4KB search search.wxss 0B search.js 312B search.wxml 218B hot hot.wxss 2KB hot.wxml 2KB hot.js 5KB component detail detail.js 3KB detail.wxss 4KB detail.wxml 4KB group group.wxss 3KB group.wxml 3KB group.js 2KB user user.js 827B user.wxml 2KB user.wxss 2KB activity tenGroup tenGroup.wxml 682B tenGroup.wxss 1017B tenGroup.js 1KB tenGroup.json 85B discount discount.js 2KB discount.json 86B discount.wxss 3KB discount.wxml 2KB lists lists.json 48B lists.wxml 707B lists.wxss 0B lists.js 632B .gitignore 5B app.wxss 4KB app.js 224B util util.js 622B资源评论
