页面在真机上偶尔出现毛刺，求指教
发布于 5 年前 作者 taoguiying 19741 次浏览 来自 问答

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

5 回复

可先忽略dialog相关信息。

css文件：

[@import](/user/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>
        

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

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

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

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

回到顶部