4***@qq.com
4***@qq.com
  • 发布:2019-04-19 10:05
  • 更新:2019-04-29 19:03
  • 阅读:786

【报Bug】cli -webkit-box-orient: 属性被移除,谁给看下啥问题

分类:uni-app

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]

重现步骤

[步骤] 明明代码里面已经写了这个属性,但是运行起来的时候就是被移除了

[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2019-04-19 10:05 负责人:无 分享
已邀请:
DCloud_uniAD_HDX

DCloud_uniAD_HDX

请提供完整示例代码、HBuilderX版本

  • 4***@qq.com (作者)

    1.9 1.9.1 1.9.2 全部都这样 ,小程序 浏览器 都认识这个属性不懂为什么 编译完了之后会被移除

    2019-04-19 11:07

  • 4***@qq.com (作者)

    cli 我也用 npm update过了依然不行

    2019-04-19 11:08

  • 4***@qq.com (作者)

    <template>

    <view class="scroller">

    <block v-if="index==0">

    <swiper ref="pageSwiper" class="banner-swiper" v-if="banner.length>0" @change="change" :autoplay="banner.length>0"

    duration="500" :circular="true" interval="5000">

    <swiper-item v-for="item in banner" :key="item.imgUrl" class="item-bg">

    <image :src="item.imgUrl" alt class="banner-img" mode="aspectFill" />

    </swiper-item>

    </swiper>

    <swiper v-else ref="pageSwiper" class="banner-swiper">

    <swiper-item class="item-bg">

    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3234703797,3050623617&fm=26&gp=0.jpg" alt

    class="banner-img">

    </swiper-item>

    </swiper>


            <!-- 指示点 -->  
    <view class="point-container">
    <view v-for="(item,index) in banner" :key="item.imgUrl" :class="['point',index==currentPoint?'point-select':'']"></view>
    </view>
    <!-- 活动 -->
    <view class="activites">
    <view v-for="item in activites" :key="item.id" @click="toActList">
    <img :src="item.imgUrl" alt>
    <span>{{item.advertContent}}</span>
    </view>
    </view>

    <span class="recommended">推荐好货</span>
    <view class="recommended-three-contanier">
    <img v-for="(item,index) in hots" :key="item.id" :src="index==3?item.nactHomeLongUrl:item.nactHomeSquareUrl" alt
    class="recommended-img" @tap="toActDetail(item)">
    </view>

    <view class="project-container">
    <img src="/static/img/muzhi.png" alt>
    <span>专题推荐</span>
    </view>
    </block>
    <view class="project-list-container" v-for="item in resultList" :key="item.id">
    <img :src="item.imgUrl" alt class="project-img" @tap="toProject(item)">
    <view class="sub-project-container">
    <view v-for="(item1,index1) in item.actList" :key="item1.id" @tap="toActDetail(item1)">
    <img :src="item1.nactLogoUrl" alt>
    <span class="sub-title">{{item1.actName}}</span>
    <span class="money">
    ¥{{item1.actPrice}}
    <span class="origin-money">¥{{item1.goodsPrice}}</span>
    </span>
    </view>
    </view>
    </view>
    </view>

    </template>


    <script>

    import {

    toActDetail

    } from "@/presenter/MallPresenter.js";

    export default {

    name: "mall-sub-page",

    props: {

    index: {

    type: Number,

    default: 0

    },

    tabIndex: {

    type: Number,

    default: 0

    },

    channelId: Number,

    scrollTop: {

    tye: Number,

    default: 0

    }

    },

    data() {

    let that = this;

    return {

    bottomDistance: 100,

    pointSelect: "point-select",

    currentPoint: 0,

    resultList: [],

    banner: [],

    activites: [],

    hots: [],

    currentIndex: 1,

    allLoad: false,

    };

    },

    onReady() {},

    mounted() {

    if (this.index == 0) {

    this.loadData(false)

    }

    },

    onReachBottom() {

    this.loadData(true);

    },

    onPullDownRefresh() {

    this.loadData(false);

    },


        methods: {  
    toProject(item) {
    uni.navigateTo({
    url: '/pages/mall/MallProject?id=' + item.id
    });
    },
    scroll(scroll) {
    this.scroll = scroll
    console.log(scroll)
    },
    toActList() {

    },
    toActDetail(item) {
    toActDetail(this, item.id)
    },
    switchTab() {
    if (this.resultList.length == 0) {
    this.loadData(false);
    }
    uni.pageScrollTo({
    scrollTop: this.scrollTop,
    duration: 0
    });
    },
    loadData(loadMore) {
    if (this.allLoad && loadMore || this.index != this.tabIndex) {
    return
    }
    this.currentIndex = !loadMore ? 1 : this.currentIndex
    this.$post("subject/findSubjectsOfChannel", {
    channelId: this.channelId,
    currentIndex: this.currentIndex
    }, result => {
    let temp = !loadMore ? result.resultList : this.resultList.concat(result.resultList)
    this.resultList = temp
    this.allLoad = result.totalCount == temp.length;
    this.currentIndex++;
    });
    if (this.index == 0 && !loadMore) {
    this.$post("advert/findAdvertList", {
    advertPosition: 2018101000003
    }, res => {
    this.banner = res.resultList;
    })
    this.$post("advert/findAdvertList", {
    advertPosition: 2018101000005
    }, res => {
    this.activites = res.resultList;
    })
    this.$post("nact/queryHotActivity", {}, res => {
    this.hots = res.resultList;
    })
    }
    },
    change(e) {
    this.currentPoint = e.detail.current
    }

    }
    };

    </script>


    <style scoped lang="scss">

    .project-list-container {

    display: flex;

    flex-direction: column;

    background: #fff;

    margin: 0 0 18upx 0;

    }


    .point-container {  
    padding: 30upx 0 50upx 0;
    display: flex;
    background: #fff;
    justify-content: center;
    }

    .project-container {
    /* margin-top: 18upx; */
    align-items: center;
    background: white;
    font-family: PingFangSC-Medium;
    font-size: 34upx;
    color: #000;
    display: flex;
    font-weight: bold;
    padding: 30upx 0 24upx 28upx;

    >image {
    width: 35upx;
    height: 35upx;
    }

    span {
    margin: 0 0 0 10upx;
    }
    }

    .recommended {
    font-family: PingFangSC-Semibold;
    font-size: 40upx;
    color: #000;
    font-weight: bold;
    padding: 34upx 0 23upx 28upx;
    display: block;
    line-height: 56upx;
    background: white;
    }

    .sub-project-container {
    margin: 18upx 0 18upx 0;
    display: inline-flex;
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;

    >view {
    width: 240upx;
    display: inline-flex;
    margin: 0 18upx 0 0;
    flex-direction: column;

    &:first-child {
    margin: 0 18upx 0 20upx;
    }

    img {
    width: 240upx;
    height: 240upx;
    border-radius: 8upx;
    }

    .money {
    font-family: PingFangSC-Medium;
    font-size: 28upx;
    color: #f33b3b;
    display: inline-flex;
    align-items: center;
    font-weight: bold;

    span {
    font-family: PingFangSC-Regular;
    font-size: 22upx;
    text-decoration: line-through;
    color: #d4d4d4;
    display: inline-block;
    }

    .origin-money {
    margin-left: 25upx;
    }
    }

    .sub-title {
    display: -webkit-box;
    margin-top: 14upx;
    width: 240upx;
    white-space: pre-wrap;
    font-family: PingFangSC-Regular;
    font-size: 24upx;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 37.5upx;
    font-weight: bold;
    -webkit-line-clamp: 2;
    // -webkit-box-orient: vertical;

    /* Firefox */
    display: -moz-box;
    -moz-box-orient: vertical;

    /* Safari、Opera 以及 Chrome */
    display: -webkit-box;
    -webkit-box-orient: vertical;

    /* W3C */
    display: box;
    box-orient: vertical;

    }
    }

    &::-webkit-scrollbar {
    display: none;
    }
    }

    .recommended-three-contanier {
    display: flex;
    width: 100vw;
    padding: 0 28upx 0 28upx;
    box-sizing: border-box;
    flex-wrap: wrap;
    background: white;
    justify-content: space-between;
    }

    .project-img {
    width: 100vw;
    height: calc(100vw * 0.52);
    }

    .recommended-img {
    border-radius: 8upx;
    width: calc((100vw - 78upx) / 3);
    margin-bottom: 11upx;
    height: calc((100vw - 78upx) / 3);

    &:nth-child(4) {
    width: calc((100vw - 67upx) - ((100vw - 78upx) / 3));
    }
    }

    .recommended-img:nth-child(n + 4) {
    margin-bottom: 48upx;
    }

    .point {
    width: 10upx;
    height: 10upx;
    background: #e9e9e9;
    border-radius: 50%;
    margin-right: 12upx;
    }

    .point-select {
    background: #bababa;
    }

    .activites {
    background: white;
    margin: 0 0 0 0;
    display: flex;
    flex-wrap: wrap;
    padding: 0 28upx 0 28upx;

    >view {
    margin: 0 0 18upx 0;
    }

    span {
    font-family: PingFangSC-Regular;
    font-size: 24upx;
    color: #232323;
    text-align: center;
    margin: 17upx 0 0 0;
    }

    view {
    width: calc((100vw - 56upx) / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }

    img {
    width: 88upx;
    height: 88upx;
    }
    }

    .root {
    display: block;
    position: relative;
    flex-direction: column;
    width: 100vw;
    /* height: calc(100vh - 98upx - 172upx); */
    min-height: 100vh;
    background: #f3f3f3;
    /* overflow-y: scroll; */
    /* -webkit-overflow-scrolling: touch; */
    }

    .banner-img {
    width: calc(100vw - 56upx);
    height: calc((100vw - 56upx) * 0.42);
    border-radius: inherit;
    margin: 0 0 0 28upx;
    }

    .scroller {
    /* height: auto; */
    }

    .banner-swiper {
    background: white;
    padding: 28upx 0 0 0;
    width: calc(100vw);
    height: calc((100vw - 56upx) * 0.42);
    }

    .item-bg {
    border-radius: 8upx;
    /* display: inline-block; */
    flex-direction: column;
    }

    </style>

    2019-04-19 11:09

  • 4***@qq.com (作者)

    根本就是有问题,随便新写一个页面都不行

    <template>

    <view class="">

    <text>()DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

    (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

    (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

    (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

    </text>

    </view>

    </template>


    <script>

    </script>


    <style scoped>

    text {

    display: -webkit-box;

    margin-top: 14upx;

    width: 240upx;

    white-space: pre-wrap;

    font-family: PingFangSC-Regular;

    font-size: 24upx;

    color: #222;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 37.5upx;

    font-weight: bold;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    }

    </style>

    2019-04-19 11:21

  • DCloud_uniAD_HDX

    回复 4***@qq.com: 用的alpha版本吗?

    2019-04-19 11:27

  • 4***@qq.com (作者)

    回复 DCloud_uniAD_HDX: 啥是 alpha版本??

    2019-04-19 11:36

  • 4***@qq.com (作者)

    回复 DCloud_uniAD_HDX: 啥是 alpha版本??

    2019-04-19 11:36

  • DCloud_uniAD_HDX

    回复 4***@qq.com: 测试无法复现,请提供完整工程

    2019-04-19 17:29

  • 4***@qq.com (作者)

    回复 DCloud_uniAD_HDX: 你跟我说你没法重现??????? 麻烦你用 vue create -p dcloudio/uni-preset-vue my-project 这是你们提供的脚手架命令 创建一个 然后再把我上面的代码加进去 必现

    2019-04-19 18:09

  • DCloud_uniAD_HDX

    回复 4***@qq.com: bug已确认

    2019-04-19 20:59

  • Nifury

    回复 DCloud_uniAD_HDX: optimize-css-assets-webpack-plugin这个插件导致的,解决办法参考:http://www.cnblogs.com/xuange306/p/10002679.html

    2019-04-29 16:10

Nifury

Nifury

遇到相同问题,多行省略效果无法实现
编译前:

.text-collapse{  
    display: -webkit-box;  
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2;  
    overflow: hidden;  
}

编译后(浏览器控制台元素样式):

.text-collapse[data-v-c222eabc] {  
    display: -webkit-box;  
    -webkit-line-clamp: 2;  
    overflow: hidden;  
}
Nifury

Nifury

optimize-css-assets-webpack-plugin这个插件导致的
解决办法

DCloud_UNI_FXY

DCloud_UNI_FXY

cli工程根目录
postcss.config.js 给 autoprefixer 增加 remove:false 配置(uni-preset-vue 已更新)

const pkg = require('./package.json')  
module.exports = {  
  plugins: [  
    require('postcss-import'),  
    require('autoprefixer')({  
      browsers: pkg.browserslist,  
      remove:false  
    }),  
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')  
  ]  
}

该问题目前已经被锁定, 无法添加新回复