可滑动导航及点击事件处理实现完整代码
//获取顶部导航数据并挂载到页⾯
//⾸页逻辑：进⼊app后，顶部导航处在热门区，点击其他导航，请求数据挂载在⾸页，实现页⾯内跳转功能let getNav = {
version: "v1.0",
author: "wmyang",
getNavInfo: function() {
var htmlContentWhole = "";
htmlContentWhole =
`
活动商品
|总有⼀件商品让你⼼动
查看更多>
`;
$(".mui-content").html(htmlContentWhole);
$.ajax({
url: "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 +=
">${data.data[0].top_button_name}`;
for (var i = 1; i < data.data.length; i++) {
if (data.data[i].top_button_status == 1) {
htmlContent +=
">${data.data[i].top_button_name}`;
}
}
$(".mui-scroll").html(htmlContent);
//点击热门出现⾸页内容
`
活动商品
|总有⼀件商品让你⼼动
查看更多>
`;
$(".mui-content").html(htmlContentWhole);
})
// 为⾸页其他顶部导航设置点击事件
//点击事件包括，点击对应导航得到对应商品列表，点击商品列表进⼊商品详情页
for (var j = 1; j < data.data.length; j++) {
let nav_id = data.data[j].top_button_name;
//console.log(this.id);
let category = this.id;
$.ajax({
type: "GET",
url: "39.98.158.247:8040/item/category/first",
data: {
category: category
},
success: function(data) {
//console.log(data);
htmlContentWhole =
`
`
$(".mui-content").html(htmlContentWhole);
let htmlContentItem = ``;
for (var i = 0; i < data.data.length; i++) {
console.log(data.data[0].item_img);
htmlContentItem +=
`
${i}" >
${data.data[i].item_img}"/> ${data.data[i].item_name}
${data.data[i].item_brand}
￥${data.data[i].item_price}
已售${data.data[i].item_sales}件`;
}
$("#item-list-nav").html(htmlContentItem);
for (var j = 0; j < data.data.length; j++) {
let itemId = data.data[this.id].item_id;
//console.log(itemId);
$.ajax({
type: "POST",
dataType: "json",
async: false,
contentType: "application/json",
url: "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>
div>
let htmlContent = "";
let first_nav_name = data.data[0].top_button_name; htmlContent +=
">${data.data[0].top_button_name}`;
for (var i = 1; i < data.data.length; i++) {
if (data.data[i].top_button_status == 1) { htmlContent +=
">${data.data[i].top_button_name}`;
}
}
$(".mui-scroll").html(htmlContent);
mui('.mui-scroll-wrapper').scroll({
scrollY: false, //是否竖向滚动

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。