极客观点
项目管理
HarmonyOS
第一次用vue,写的demo在PC端浏览器和浏览器模拟器里面数据都是正常显示,交互也没问题.结果在手机真机上测试出现数据渲染不出来.希望大家帮忙解答一下~
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>双十一活动</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.title1 {
color: #fff;
font-size: 16px;
padding: 10px;
}
.panel {
margin-bottom: 0px;
}
.table {
margin-bottom: 0px;
}
.progress {
margin-top: 10px;
margin-bottom: 0px;
background-color: #411361;
border: 2px solid #8429c3;
}
.progress-bar {
background-color: #f1124c;
}
.counter {
font-size: 14px;
color: #fff;
margin: 5px 0;
}
.amount-buy {
margin: 10px 0;
background-color: #391453;
color: #fff;
}
.div1 {
padding-left: 0px;
}
.div2 {
padding: 5px;
text-align: center;
}
.btn-buy {
width: 100%;
color: #fff;
background-color: #8429c3;
border-style: none;
font-size: 10px;
}
.daoju-item {
background-color: #320f4a;
}
.min-buy,
.max-buy {
background-color: #1f092f;
color: #fff;
font-size: 15px;
border: 2px solid #e8a005;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 24px;
line-height: 15px;
border-radius: 15px;
}
.activity1 {
position: relative;
}
.buy-click-area {
position: absolute;
width: 50%;
height: 16%;
top: 79%;
left: 26%;
text-align: center;
line-height: 36px;
border-radius: 8px;
background-color: #e8a005;
color: #fff;
font-size: 14px;
cursor: pointer;
}
.had-buy {
background-color: #808080;
color: #fff;
cursor: pointer;
}
.foot {
margin-top: 20px;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
border: 1px solid #320f4a;
margin: 10px;
padding: 5px;
}
.media-object {
height: 200px;
width: 300px;
}
.media-left {
padding-top: 4px;
}
@media screen and (max-width: 350px) {
.media-object {
height: 20px;
width: 20px;
}
.media-left {
padding-top: 2px;
}
}
@media screen and (min-width: 500px) {
.container {
width: 430px;
}
}
.list-group {
padding-left: 0;
margin-bottom: 10px;
}
.list-group-item {
position: relative;
display: block;
padding: 5px 10px;
margin-bottom: -1px;
background-color: #012336;
border: 1px solid #000;
color: #fff;
}
.col-xs-12 {
padding-left: 15px;
padding-right: 15px;
}
.panel-primary {
border-style: none;
}
.panel-primary .panel-heading {
color: #fff;
background-color: #1f092f;
border-style: none;
}
.panel-primary .panel-body {
background-color: #1f092f;
}
.btn.focus,
.btn:focus,
.btn:hover {
color: #000;
text-decoration: none;
}
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
outline: 0px auto;
outline-offset: 0px;
}
.container1 {
display: flex;
padding: 5px;
}
.left,
.right {
flex: 1;
position: relative;
}
.right {
margin-left: 5px;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="display: block; margin-left: auto; margin-right: auto; background-color: #1f092f;">
<div style="display: block; margin-left: auto; margin-right: auto; padding-top: 300px; background:no-repeat top url(images/top.jpg);"></div>
<div class="container" style="display: block;margin-top: 10px;margin-left: auto; margin-right: auto;background-color: #180137;">
<!-- 活动1 -->
<div class="row" id="activity1">
<div class="col-xs-12 title1">银月亮礼包</div>
<div class="container1">
<div class="left">
<img class="media-object img-responsive" style="height:240px;width:100%;" src="images/silver-moon-activity1.jpg">
<div class="buy-click-area" v-bind:class="{'had-buy': isBuy1}" v-on:click="buyGift(1)">
<span v-if="isBuy1">已购买</span>
<span v-if="!isBuy1">立即购买</span>
</div>
</div>
<div class="right">
<img class="media-object img-responsive" style="height:240px;width:100%;" src="images/silver-moon-activity2.jpg">
<div class="buy-click-area" v-bind:class="{'had-buy': isBuy2}" v-on:click="buyGift(2)">
<span v-if="isBuy2">已购买</span>
<span v-if="!isBuy2">立即购买</span>
</div>
</div>
</div>
<div class="col-xs-12 title1">金月亮礼包</div>
<div class="container1">
<div class="left">
<img class="media-object img-responsive" style="height:240px;width:100%;" src="images/gold-moon-activity1.jpg">
<div class="buy-click-area" v-bind:class="{'had-buy': isBuy3}" v-on:click="buyGift(3)">
<span v-if="isBuy3">已购买</span>
<span v-if="!isBuy3">立即购买</span>
</div>
</div>
<div class="right">
<img class="media-object img-responsive" style="height:240px;width:100%;" src="images/gold-moon-activity2.jpg">
<div class="buy-click-area" v-bind:class="{'had-buy': isBuy4}" v-on:click="buyGift(4)">
<span v-if="isBuy4">已购买</span>
<span v-if="!isBuy4">立即购买</span>
</div>
</div>
</div>
</div>
<!-- /活动1 -->
<div class="col-xs-12" style="background-color: #280d3a;padding: 10px 0;margin: 20px 0;">
<p class="text-center" style="font-size: 18px;color: #FFFFFF;">超值夺宝疯狂抢</p>
<p class="text-center" style="font-size: 13px;color: #817888;">活动期间共计 6 档道具,低至一钻,等你抢购!</p>
</div>
<!-- 活动2 -->
<table class="table table-condensed" id="activity2">
<tr v-for="(row,i) in listDaoJu">
<td v-for="(cell,j) in row" class="daoju-item">
<div :id="'T_'+(i*3+j)">
<img class="media-object img-responsive" style="height: 102px;width: 140px;" v-bind:src="cell.images" alt="道具">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100" v-bind:style="{width: (cell.buy/cell.total)*100 + '%'}"></div>
</div>
<div class="text-center counter">{{cell.buy}}/{{cell.total}}</div>
<div class="amount-buy row">
<div class="col-xs-4 div1">
<button type="button" class="btn btn-default btn-circle min-buy" @click="min(cell)">-</button>
</div>
<div class="col-xs-4 div2">{{cell.count}}</div>
<div class="col-xs-4 div1">
<button type="button" class="btn btn-default btn-circle max-buy" @click="max(cell)">+</button>
</div>
</div>
<button type="button" class="btn btn-default btn-buy" @click="buyDaoJu(cell.id, cell.count)">立即购买</button>
</div>
</td>
</tr>
</table>
<!-- /活动2 -->
<div class="row foot">
<div class="col-xs-12">
<footer class="footer text-center">
<p style="color: #fff">最终解释权归遇见所有 © 2017 iAround, Inc.</p>
</footer>
</div>
</div>
</div>
<!-- /container -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
// 活动一部分
new Vue({
el: '#activity1',
data: {
isBuy1: 0,
isBuy2: 0,
isBuy3: 0,
isBuy4: 0,
gifts: []
},
created() {
this.request();
},
methods: {
// 买礼包方法
buyGift: function (id) {
var self = this;
// 用户已购买的,禁止当天再次购买
if (this.gifts[id] == '1') {
alert('您当天已购买, 不能重复购买');
return;
} else {
if (confirm('是否购买礼物?')) {
// 购买打折产品
$.ajax({
url: 'xxxxx',
data: { jobId: id },
type: 'POST',
success: function (data) {
if (data.status == 200) {
alert(data.message);
window.location.reload();
} else if (data.status == -100) {
alert(data.errordesc);
}
}.bind(self)
});
}
}
},
//获取用户购买礼包信息
request: function () {
var self = this;
$.ajax({
url: 'xxxxxx',
data: { key: 'hello121', uid: 123 },
type: 'POST',
success: function (data) {
if (data.status == 200) {
this.gifts = data.info;
for (key in this.gifts) {
switch (key) {
case '1':
this.isBuy1 = this.gifts[key];
break;
case '2':
this.isBuy2 = this.gifts[key];
break;
case '3':
this.isBuy3 = this.gifts[key];
break;
case '4':
this.isBuy4 = this.gifts[key];
default:
break;
}
}
}
}.bind(self)
});
}
},
computed: {
isBuy1: function () {
return this.isBuy1;
},
isBuy2: function () {
return this.isBuy2;
},
isBuy3: function () {
return this.isBuy3;
},
isBuy4: function () {
return this.isBuy4;
}
}
});
// 活动二部分
new Vue({
el: '#activity2',
data: {
// 道具列表, 道具数目固定为9个
list: []
},
created() {
this.request();
},
methods: {
// 购买数量减少方法
min: function (item) {
if (item.buy > item.total) {
item.count--;
item.buy--;
}
},
// 购买数量增加方法
max: function (item) {
if (item.buy < item.total) {
item.count++;
item.buy++;
}
},
request: function () {
var self = this;
// 获取道具数据列表
$.ajax({
url: 'xxxxx',
data: {},
type: 'POST',
success: function (data) {
if (data.status == 200) {
this.list = data.info;
}
}.bind(self)
});
},
// 购买道具方法
buyDaoJu: function (jobId, count) {
var self = this;
$.ajax({
url: 'xxxxxx',
data: { jobId: jobId, count: count },
type: 'POST',
success: function (data) {
if (data.status == 200) {
alert(data.message);
} else {
console.log(data);
}
}.bind(self)
});
}
},
computed: {
listDaoJu: function () {
var list = this.list;
var arrTemp = [];
var index = 0;
var sectionCount = 3;
for (var i = 0; i < list.length; i++) {
index = parseInt(i / sectionCount);
if (arrTemp.length <= index) {
arrTemp.push([]);
}
arrTemp[index].push(list[i]);
}
return arrTemp;
}
},
});
</script>
</body>
</html>
html5
你好！请问您的问题得到解决了吗？我也遇到类似问题，pc浏览器调试数据可以显示，在手机真机调试数据不显示不报错