1.webview开发app端,默认全屏显示,怎么设置高度?
var currentWebview1 = this.$mp.page.$getAppWebview();//获取当前web-view
setTimeout(function() {
var wv1 = currentWebview1.children()[0];
wv1.setStyle({//设置web-view距离顶部的距离以及自己的高度,单位为px
position:'static',
top: 390,
height:170
})
}, 1000);//如页面初始化调用需要写延迟
2.那设置完了高度,它是默认固定在可视窗设置的top位置的,不符合翻动页面的交互问题?(这种方法真的不推荐,但是遇到沙调产品可以试试 )
父组件页面监听滚动条滚动:
onPageScroll(res) {
uni.$emit('onPageScroll', res.scrollTop);//传递参数
},
子组件利用$on监听父组件事件:
let that =this
uni.$on('onPageScroll', function(data) {//接收参数
var currentWebview2 = that.$mp.page.$getAppWebview();//获取当前web-view
setTimeout(function() {
var wv2 = currentWebview2.children()[0];
wv2.setStyle({//设置web-view距离顶部的距离以及自己的高度,单位为px
position:'static',
top: 390-data, // 这个操作就是动态改变webview离可视窗顶部的距离,达到随页面滚动的目的
height:170
})
}, 0);//如页面初始化调用需要写延迟
});
3.uni-app向webview传值
Uni-app页面:
<view class="tui-map">
<web-view id="demo" :src="webViewUrl"></web-view>
</view>
定义一下 webViewUrl:’/static/img/gaodeMap.html?markers=’,
this.webViewUrl = '/static/img/map1.html?markers=' + encodeURIComponent(JSON.stringify(this.covers))+'&pointsData=' + encodeURIComponent(JSON.stringify(pointsData))
//这里传值就要注意了,要先JSON.stringify给数据字符串化再给encodeURIComponent转码编译,防止中文乱码什么的,单独只有encodeURIComponent的话,数据过长会有丢失数据的情况,我这边是这样的(app端)
webview页面:
let reg = new RegExp("(^|&)"+ 'markers' +"=([^&]*)(&|$)");// markers是要以markers字符串来区别截取前后作为数组的0,1项
let r = decodeURIComponent(window.location.search.substr(1).match(reg)[2]);//反转码
r = JSON.parse(r) // json字符串数据转json对象
// 添加标记点坐标
r.forEach(function(marker) {
new AMap.Marker({
map: map,
icon: '../../static/images/common/location.png',
position: [marker.longitude, marker.latitude],
offset: new AMap.Pixel(-13, -30)
});
});
//多边形区域坐标数据,以pointsData传值
let reg1 = new RegExp("(^|&)"+ 'pointsData' +"=([^&]*)(&|$)");
var path = [] // 可能有多块区域同时展示
var path2 = []
var path3 = []
let pointData = decodeURIComponent(window.location.search.substr(1).match(reg1)[2]);
pointData = JSON.parse(pointData)
pointData[0].map(item=>{
path.push([item.gd_LAT,item.gd_LON])
})