公告列表
公告列表
收藏
回答

页面在真机上偶尔出现毛刺，求指教

小程序页面在大多数情况下正常展示，但是在极少数情况下，会偶尔出现毛刺、断层等现象。请问这是什么原因呢？求大神指教：




回答关注问题邀请回答
收藏

5 个回答

  • 肖志业
    肖志业
    2017-12-05

    回复4楼：使用webpack打包，设定scss-loader即可

    2017-12-05
    有用
    回复
  • Maosheng
    Maosheng
    2017-12-04

    请问怎么在小程序里面用scss啊。。。

    2017-12-04
    有用
    回复
  • 肖志业
    肖志业
    2017-12-04

    可先忽略dialog相关信息。

    2017-12-04
    有用
    回复
  • 肖志业
    肖志业
    2017-12-04
    css文件：
    @import "./dialog/dialog.scss";
     
    $footer-height: 120rpx;
    $footer-border: 2rpx solid #cacaca;
    $title-font-size: 30rpx;
    $sub-title-font-size: 28rpx;
    $coupon-value-font-size: 48rpx;
    $card-item-height: 243rpx;
     
    .full-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #f9f9f9;
    }
     
    .no-card-info {
        font-size: 28rpx;
        color: #8c8c8c;
    }
     
    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: $footer-height;
        background-color: #ffffff;
        border-top: $footer-border;
        display: flex;
        flex-direction: row;
    }
     
    .scroll-content {
        position: absolute;
        bottom: $footer-height;
        left: 0;
        right: 0;
        top: 0;
        background-color: #f2f2f2;
    }
     
    .button-footer {
        font-size: 36rpx;
        width: 50%;
        height: 100%;
        color: #ababab;
    }
     
    .button-footer-selected {
        color: #f6a573;
    }
     
    .botton-footer-left {
        border-right: $footer-border;
    }
     
    .button-footer-wrapper {
        height: 100%;
        text-align: center;
        vertical-align: middle;
        line-height: $footer-height;
    }
     
    .card-items {
        background-color: #f2f2f2;
        padding: 32rpx;
    }
    image {
        background-color: transparent;
    }
     
    .card-item {
        display: flex;
        flex-direction: row;
        margin-top: 20rpx;
        filter: drop-shadow(4rpx 4rpx 4rpx #cccccc);
        background-color: transparent;
    }
    .card-item-disabled {
        color: #aeaeae;
    }
    .card-item-wrapper {
        height: $card-item-height;
        width: 100%;
        background-color: #ffffff;
    }
     
    .item-left-image {
        width:67rpx;
        height:$card-item-height;
    }
     
    .card-item-action {
        width: 185rpx;
        height: $card-item-height;
        line-height: 260rpx;
        vertical-align: middle;
        text-align: center;
        font-size: $sub-title-font-size;
        font-weight: bold;
        color: #ffffff;
        background-color: transparent;
        white-space: nowrap;
    }
    .card-item-action-text {
        width: 185rpx;
        height: $card-item-height;
    }
    .card-item-action-disabled {
        color: #a1a1a1;
    }
     
    .card-item-title {
        display: flex;
        flex-direction: row;
        font-size: $sub-title-font-size;
        padding: 12rpx 0;
        height: 48rpx;
    }
     
    .card-item-vendor {
        width: 60rpx;
        white-space: nowrap;
    }
     
    .card-item-name {
        padding-left: 8rpx;
    }
     
    .card-item-body {
        display: flex;
        flex-direction: row;
    }
     
    .card-item-logo {
        display: inline-block;
        margin-left: 4rpx;
    }
     
    .card-item-value {
        display: flex;
        flex-direction: row;
        margin-top: -10rpx;
        margin-bottom: 10rpx;
    }
     
    .card-item-value-number-left {
        font-size: $coupon-value-font-size;
        color: #F8955F;
    }
     
    .card-item-value-number-right {
        font-size: $coupon-value-font-size;
        color: #F8A71C;
    }
     
    .card-item-value-number-disabled {
        color: #cbcbcb;
        font-size: $coupon-value-font-size;
    }
     
    .card-item-rule {
        font-size: 24rpx;
        color: #ababab;
    }
     
    .card-item-time-limit {
        font-size: 24rpx;
        color: #ababab;
    }
     
    .card-item-value-limit-left {
        font-size: 28rpx;
        color: #F8955F;
        padding-top: 24rpx;
        padding-left: 20rpx;
    }
     
    .card-item-value-limit-right {
        font-size: 28rpx;
        color: #F8A71C;
        padding-top: 24rpx;
        padding-left: 20rpx;
    }
     
    .card-item-value-limit-disabled {
        color: #cbcbcb;
        font-size: 28rpx;
        padding-top: 24rpx;
        padding-left: 20rpx;
    }
     
     
    .card-item-image {
        display: inline-block;
        width: 53rpx;
        height: 34rpx;
    }
    这是主要的html文件：

    <import src="./dialog/dialog.wxml"/>
     
    <template is="dialog" data="{{...qrCodeModalInfo}}"/>
     
    <view class="full-container">
      <scroll-view wx:if="{{currentTab==2}}" class="scroll-content" scroll-y="true">
        <import src="./myCard/myCard.wxml" />
        <template is="myCard" data="{{...myCards}}" />
      </scroll-view>
      <scroll-view wx:if="{{currentTab==1}}" class="scroll-content" scroll-y="true">
        <import src="./recommendCard/recommendCard.wxml" />
        <template is="recommendCard" data="{{...recommendCards}}" />
      </scroll-view>
      <view class="footer">
        <view class="button-footer {{currentTab == 1 ? 'button-footer-selected' : ''}}" bindtap="chooseRecommend">
          <view class="botton-footer-left button-footer-wrapper">
            <image wx:if="{{currentTab == 1}}" src="../../images/recommend-icon.png" style="width: 34rpx; height: 36rpx;"/>
            <image wx:if="{{currentTab != 1}}" src="../../images/recommend-icon-grey.png"
                   style="width: 34rpx; height: 36rpx;"/>
            卡券推荐
          </view>
        </view>
        <view class="button-footer {{currentTab == 2 ? 'button-footer-selected' : ''}}" bindtap="chooseMyCards">
          <view class="button-footer-wrapper">
            <image wx:if="{{currentTab == 2}}" src="../../images/my-card-icon.png" style="width: 44rpx; height: 30rpx;"/>
            <image wx:if="{{currentTab != 2}}" src="../../images/my-card-icon-grey.png"
                   style="width: 44rpx; height: 30rpx;"/>
            我的卡券
          </view>
        </view>
      </view>
    </view>

    这是其中一个template文件：



    <template name="recommendCard">

    <view wx:if="{{!recommendCards || recommendCards.length == 0}}" class="no-card-info" style="text-align:center;">
          <view>
            <image src="../../../images/no-recommend-card.png" style="width:325rpx;height:229rpx;margin: 200rpx 0 50rpx;"></image>
          </view>
          <view>
            <text>小卡券很淘气, 全部飞到月球啦</text>
          </view>
          <view>
            <text>敬请期待~</text>
          </view>
        </view>
    <view wx:if="{{recommendCards && recommendCards.length > 0}}" class="card-items">
          <view wx:for="{{recommendCards}}" wx:key="item_id" class="card-item ">
            <image src="../../../images/get-back-left.png" class="item-left-image"></image>
            <view class="card-item-wrapper">
              <view class="card-item-title">
                <view class="card-item-logo">
                  <image wx:if="{{item.cardStatus == 1}}" mode="aspectFit" src="../../../images/huaguan-logo-sm.png" class="card-item-image"></image>
                  <image wx:if="{{item.cardStatus != 1}}" mode="aspectFit" src="../../../images/huaguan-logo-grey-sm.png" class="card-item-image"></image>
                </view>
                <view class="card-item-name">{{item.cardTitle}}</view>
              </view>
              <view class="card-item-body">
                <view class="card-item-content">
                  <view class="card-item-value">
                    <view class="{{item.cardStatus == 1 ? 'card-item-value-number-left' : 'card-item-value-number-disabled'}}">
                      {{item.cardValue}}
                    </view>
                    <view class="{{item.cardStatus == 1 ? 'card-item-value-limit-left' : 'card-item-value-limit-disabled'}}">
                      {{item.cardRule}}
                    </view>
                  </view>
                  <view class="card-item-rule">{{item.cardLimit == null ? '全品类' : item.cardLimit}}</view>
                  <view class="card-item-time-limit">有效期: {{item.dateLimit}}</view>
                </view>
              </view>
            </view>
            <view class="card-item-action" data-item="{{index}}"
                  bindtap="addCard" data-canuse="{{item.cardStatus}}">
              <image wx:if="{{item.cardStatus == 1}}" src="../../../images/get-back-right.png" class="card-item-action-text"></image>
              <image wx:if="{{item.cardStatus == 3}}" src="../../../images/sold-back-right.png" class="card-item-action-text"></image>
              <image wx:if="{{item.cardStatus == 2}}" src="../../../images/get-back-right-grey.png" class="card-item-action-text"></image>
            </view>
          </view>
        </view>
    </template>

            


    该小程序已上线，上线时候发现这个问题很烦恼啊。可以搜索："华冠购物指南"得到。

    2017-12-04
    有用
    回复
  • 2017-12-04

    你好，请提供一下能复现问题的简单代码示例。

    2017-12-04
    有用
    回复
请 登录 后发表内容
相关文档