微信公众号select 用vue绑定change事件 在安卓手机上闪屏 无法加载select下拉选?
正常页面如下 点击选择省加载省下拉选项
现有部分安卓手机出现点击选择省无法加载select下拉选项并伴随屏幕页面闪烁的现象
代码如下
<div class="input-group">
<select name="" id="" class="flex-full input select"
v-on:change="provinceSelect($event)">
<option value="">选择省</option>
<option v-for="(province,index) in provincelist"
v-bind:value="index">{{province.areaname}}</option>
</select> <select name="" id="" class="flex-full input select"
v-on:change="citySelect($event)">
<option value="">选择市</option>
<option v-for="(city,index) in citylist" v-bind:value="index">{{city.areaname}}</option>
</select> <select name="" id="" class="flex-full input select"
style="margin-right: 0;" v-on:change="countySelect($event)">
<option value="">区县</option>
<option v-for="(county,index) in countylist" v-bind:value="index">{{county.areaname}}</option>
</select>
</div>
var vm = new Vue({
el: '#app',
data: {
isLoding: false,
showModal: false, // 是否弹窗生成海报
showActive: 0, // 弹窗下标(0:分享,1:评价,2:评价成功 3:积分记录,4:邀请好友记录)
state: 0, // 状态(0:绑定信息,1:未服务,2:服务中,3:服务完成,4:已评价)
shareId: '', //生成海报的右上角编号
base64: [], //生成的海报图片
pingjia: ['上门及时', '主动沟通', '服务态度好', '服务热情', '细致贴心', '技术专业'], //服务评价
pingjiasel: [false, false, false, false, false, false], //服务评价选择
page: 1, //当前页
size: 16, //每页多少
jifenData: [], //积分记录
yaoqData: [], //邀请好友记录
timer:null,
count:0,
TIME_COUNT:300,
codeImgSrc:"",
userId:null,
serviceNamePhone:"",
timer_user:null,
//获取到的验证码
ajaxCode:"",
serviceFinishUser:{
name:"",
mobile:"",
address:"",
},
shareImg: '<%=basePath%>/view/mall/img/[email protected]', //生成海报的背景图(6选1)
codeImg: '', //生成海报的二维码图片,
provincelist:[],
citylist:[],
countylist:[],
activityAreaProvinceId:null,
activityAreaProvince:null,
activityAreaCityId:null,
activityAreaCity:null,
activityAreaCountyId:null,
activityAreaCounty:null,
myjf:"我的积分:0",
ifServiceState:true,
shareUserlist:[],
//openid:'${openid}',
serviceEndNotifyFlag:false,
openid:'ocKV5jhBNFWPqpG-93uKaMs9U320-93uKaMs9U320',
diasabledInput:false,
diasabledImg:true,
},
methods: {
getAreaProvince: function (){
var _this=this;
$.ajax({
type: "POST",
url: "<%=basePath%>/smileActivity/getArea.do",
data: {
'arealevel':1
},
success: function (result) {
var res=JSON.parse(result);
//console.log("ajax获取区域--"+JSON.stringify(res));
_this.provincelist=res.arealist;
},
});
},
provinceSelect:function(event){
var _this=this;
var index=event.target.value;
this.activityAreaProvinceId = this.provincelist[index].areaid;
this.activityAreaProvince = this.provincelist[index].areaname;
console.log(this.activityAreaProvince);
console.log(this.activityAreaProvinceId);
$.ajax({
type: "POST",
url: "<%=basePath%>/smileActivity/getArea.do",
data: {
'arealevel':2,
areaparentid:this.activityAreaProvinceId
},
success: function (result) {
var res=JSON.parse(result);
// console.log("ajax获取区域--"+JSON.stringify(res));
_this.citylist=res.arealist;
},
});
},
citySelect:function(event){
var _this=this;
var index=event.target.value;
this.activityAreaCityId = this.citylist[index].areaid;
this.activityAreaCity = this.citylist[index].areaname;
console.log(this.activityAreaCity);
console.log(this.activityAreaCityId);
$.ajax({
type: "POST",
url: "<%=basePath%>/smileActivity/getArea.do",
data: {
'arealevel':3,
areaparentid:this.activityAreaCityId
},
success: function (result) {
var res=JSON.parse(result);
//console.log("ajax获取区域--"+JSON.stringify(res));
_this.countylist=res.arealist;
},
});
},
countySelect:function(event){
var _this=this;
var index=event.target.value;
this.activityAreaCountyId = this.countylist[index].areaid;
this.activityAreaCounty = this.countylist[index].areaname;
console.log(this.activityAreaCounty);
console.log(this.activityAreaCountyId);
}
}
created: function() {
this.getAreaProvince();
}