微信小程序填坑之旅

一、解决scroll-view的滚动条问题

1、出现场景css、

　　有些场景下scroll-view是不需要滚动条的，比如顶部导航栏的横向滑动。而在单页的css样式中加入特定代码不能影响到全局的样式

2、解决方法

　　在微信小程序的全局css样式（app.wxss）中加入特定代码：　　

　　::-webkit-scrollbar {

　　　　//宽度为0

　　　　width: 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;

　　　　width: 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{

　　width: 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>