一、解决scroll-view的滚动条问题
1、出现场景css、
有些场景下scroll-view是不需要滚动条的，比如顶部导航栏的横向滑动。而在单页的css样式中加入特定代码不能影响到全局的样式
2、解决方法
在微信小程序的全局css样式（app.wxss）中加入特定代码：
::-webkit-scrollbar {
//宽度为0
0;
//高度为0
height: 0;
//颜色为透明
color: transparent;
}
3、示例代码
二、微信小程序fixed定位下scroll-view滚动失效
1、出现场景
想要将顶部导航栏已fixed的方式固定在页面的最上方，实现了fixed定位后，却同时出现了scroll-view失效的bug，即顶部导航栏不能滑动了。
2、解决方法
scroll-view元素的父元素的css属性width：100%即可解决。（该父元素的position属性值应为fixed）
3、示例代码
html代码：
<!-- 顶部导航栏频道信息 -->
<div class="topNav">
<scroll-view class="scrollTitle" :scroll-x="true" :scroll-with-animation="1000" >
<p class="navAll">全部直播</p>
<div v-for="item in topNav" :key="index" class="scrollContent">
<p class="navTitle">{{item.name}}</p>
</div>
</scroll-view>
</div>
css代码：
/* 频道信息样式 */
.content{
margin-top:70rpx;
}
.topNav {
//解决方法
position: fixed;
100%;
top:0;
background-color: white;
z-index: 1;
}
.scrollTitle {
white-space: nowrap;
display: flex;
margin-bottom: 5rpx;
}
.scrollContent {
display: inline-block;
margin: 0;
}
.navAll {
float: left;
font-size: 0.3rem;
margin: 9rpx 24rpx 0 6rpx;
}
.navTitle {
font-size: 0.3rem;
margin-right: 24rpx;
}
三、文字超过div宽度用省略号显示css
1、出现场景
文本过长，超出div或p元素的宽度，导致元素高度发生变化，影响原来的样式
2、解决方法
使用代码将超出的文本隐藏，并用...代替超出文本
3、示例代码
html代码：
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
css代码：
p{
50px; /*必须设置宽度*/
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis; /*以省略号...显示*/
white-space: nowrap; /*强制不换行*/
}
四、微信跳转到指定页面问题
1、出现场景
微信本页面内不能跳转到第三方页面
2、解决方法
在小程序中另起一个页面，在其中使用web-view的方法链接到第三方页面，但需要在微信小程序后台配置业务域名（个人级的小程序不支持，企业级的支持）
3、示例代码
<template>
<div class="download">
<web-view :src="url" @message="message"></web-view>
</div>
</template>
<script>
export default{
data(){
return{
platform: 'ios'
}
},
computed: {
url() {
const platform = this.platform;
//判断设备类型为android还是ios
if (platform === 'ios') {
return 'https://apk.zhangyu.tv/download/ota/'; //自己编写的H5页面，需要配置业务域名
} else {
return 'https://a.app.qq.com/o/simple.jsp?pkgname=com.zhangyu'; //腾讯应用宝页面
}
}
},
onLoad(options) {
this.platform = options.platform || this.platform;
}
}
</script>
<style>
</style>