使用技术：zpto
对于动态数据继续.属性，必须先判断他自身是否存在
<div class="etImgs">
<% if(items[i].image && items[i].image.length>0){ %>
<% for(var j=0;j<items[i].image.length;j++){ %>
<img class="etImg" src="<%=items[i].image[j]%>" "this.'';src='./img/food.png'">
<% } %>
<% } %>
</div>
使用onerror方法 如果1图片加载失败，替换为2图片
<img src="1.png" "this.'';src='2.png'" />
页面有横向滚动条
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
模拟点击事件，要放在点击事件的后边
获取id是foodname的第一个子元素
$('#foodname').children().eq(0).click();
模板动态渲染的页面元素，必须在渲染之后才能获取到
success: function(res) {
console.log(res.data);
let data = res.data;
var coupon = template('tem_coupon', data.coupon);
$('.discount_coupon').html(coupon);
// bug:模板动态渲染的页面元素，必须在渲染之后才能获取到
// 优惠券说明，点击收起展开切换
$('#up').on('click', function() {
console.log(111111111);
if ($(this).text().trim() == '收起') {
$('.limit_con').height('2rem')
$(this).text('展开')
} else {
$('.limit_con').height('5.2rem')
$(this).text('收起')
}
})
decodeURIComponent可解决url中中文参数乱码问题
var url = decodeURIComponent(location.search); //获取url中"?"符后的字串
封装获取url地址中参数的方法
function GetRequest() {
// bug:decodeURIComponent可解决url中中文参数乱码问题
var url = decodeURIComponent(location.search); //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
// bug:decodeURIComponent可解决url中中文参数乱码问题
theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
}
}
return theRequest;
}
var Request = new Object();
let query = GetRequest();
console.log(query);
移动端适配
<head>
<meta charset="UTF-8">
<!-- bug:不设置会有横向滚动条 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>套餐详情</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/foodDetail.css" />
<link rel="stylesheet" href="./css/mui.min.css">
// rem适配
<script>
var bw = (document.documentElement.clientWidth / 7.5) + "px";
var htmlTag = document.getElementsByTagName("html")[0];
htmlTag.style.fontSize = bw;
</script>
</head>
mui 左右滑动
引入mui的css和js文件
<link rel="stylesheet" href="./css/mui.min.css">
js文件放在body的最底部
<script src="./js/mui.min.js"></script>
html
<div class="mui-scroll-wrapper">
<div class="mui-scroll" id="foodname">
<script type="text/template" id="tem_name">
<% for(var i=0;i<items.length;i++){ %>
<!--这里放置真实显示的DOM内容-->
<span class="mui-control-item" data-id="<%= items[i].product_id%>">
<%= items[i].product_name%>
</span>
<% } %>
</script>
</div>
</div>
js部分
// 套餐详情mui滑动
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
scrollY: false, //是否竖向滚动
scrollX: true, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: false, //是否显示滚动条
bounce: true //是否启用回弹
});
// 动态控制套餐列表的宽度：在页面渲染成功之后success中
if (res.data.length > 1) {
$('.mui-scroll').width($('.mui-control-item').width() * res.data.length)
} else {
$('.mui-scroll').width($('.mui-control-item').width() * 1.5)
}
// console.log($('.mui-scroll').width())