小程序
小游戏
企业微信
微信支付
扫描小程序码分享
小程序页面在大多数情况下正常展示,但是在极少数情况下,会偶尔出现毛刺、断层等现象。请问这是什么原因呢?求大神指教:
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
回复4楼:使用webpack打包,设定scss-loader即可
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
请问怎么在小程序里面用scss啊。。。
可先忽略dialog相关信息。
@import
"./dialog/dialog.scss"
;
$footer-
height
:
120
rpx;
border
2
rpx
solid
#cacaca
$title-
font-size
30
$sub-title-
28
$coupon-value-
48
$card-item-
243
.full-container {
position
absolute
top
0
bottom
left
right
background-color
#f9f9f9
}
.no-card-info {
color
#8c8c8c
.footer {
: $footer-height;
#ffffff
border-top
: $footer-border;
display
: flex;
flex-
direction
: row;
.scroll-content {
#f2f2f2
.button-footer {
36
width
50%
100%
#ababab
.button-footer-selected {
#f6a573
.botton-footer-
{
border-right
.button-footer-wrapper {
text-align
center
vertical-align
middle
line-height
.card-items {
padding
32
image {
transparent
.card-item {
margin-top
20
filter: drop-shadow(
4
#cccccc
);
.card-item-disabled {
#aeaeae
.card-item-wrapper {
: $card-item-height;
: 100%
.item-left-image {
67
:$card-item-height;
.card-item-action {
185
260
: $sub-title-font-size;
font-weight
bold
white-space
nowrap
.card-item-action-text {
.card-item-action-disabled {
#a1a1a1
.card-item-title {
12
.card-item-vendor {
60
.card-item-name {
padding-left
8
.card-item-body {
.card-item-logo {
: inline-
block
margin-left
.card-item-value {
-10
margin-bottom
10
.card-item-value-number-
: $coupon-value-font-size;
#F8955F
#F8A71C
.card-item-value-number-disabled {
#cbcbcb
.card-item-rule {
24
.card-item-time-limit {
.card-item-value-limit-
padding-top
.card-item-value-limit-disabled {
.card-item-image {
53
34
<
import
src
=
"./dialog/dialog.wxml"
/>
template
is
"dialog"
data
"{{...qrCodeModalInfo}}"
view
class
"full-container"
>
scroll-view
wx:if
"{{currentTab==2}}"
"scroll-content"
scroll-y
"true"
"./myCard/myCard.wxml"
"myCard"
"{{...myCards}}"
</
"{{currentTab==1}}"
"./recommendCard/recommendCard.wxml"
"recommendCard"
"{{...recommendCards}}"
"footer"
"button-footer {{currentTab == 1 ? 'button-footer-selected' : ''}}"
bindtap
"chooseRecommend"
"botton-footer-left button-footer-wrapper"
image
"{{currentTab == 1}}"
"../../images/recommend-icon.png"
style
"width: 34rpx; height: 36rpx;"
"{{currentTab != 1}}"
"../../images/recommend-icon-grey.png"
卡券推荐
"button-footer {{currentTab == 2 ? 'button-footer-selected' : ''}}"
"chooseMyCards"
"button-footer-wrapper"
"{{currentTab == 2}}"
"../../images/my-card-icon.png"
"width: 44rpx; height: 30rpx;"
"{{currentTab != 2}}"
"../../images/my-card-icon-grey.png"
我的卡券
这是其中一个template文件:
<template name="recommendCard">
name
"{{!recommendCards || recommendCards.length == 0}}"
"no-card-info"
"text-align:center;"
"../../../images/no-recommend-card.png"
"width:325rpx;height:229rpx;margin: 200rpx 0 50rpx;"
></
text
>小卡券很淘气, 全部飞到月球啦</
>敬请期待~</
wx:if="{{recommendCards && recommendCards.length > 0}}" class="card-items">
wx:for
"{{recommendCards}}"
wx:key
"item_id"
"card-item "
"../../../images/get-back-left.png"
"item-left-image"
"card-item-wrapper"
"card-item-title"
"card-item-logo"
"{{item.cardStatus == 1}}"
mode
"aspectFit"
"../../../images/huaguan-logo-sm.png"
"card-item-image"
"{{item.cardStatus != 1}}"
"../../../images/huaguan-logo-grey-sm.png"
"card-item-name"
>{{item.cardTitle}}</
"card-item-body"
"card-item-content"
"card-item-value"
"{{item.cardStatus == 1 ? 'card-item-value-number-left' : 'card-item-value-number-disabled'}}"
{{item.cardValue}}
"{{item.cardStatus == 1 ? 'card-item-value-limit-left' : 'card-item-value-limit-disabled'}}"
{{item.cardRule}}
"card-item-rule"
>{{item.cardLimit == null ? '全品类' : item.cardLimit}}</
"card-item-time-limit"
>有效期: {{item.dateLimit}}</
"card-item-action"
data-item
"{{index}}"
"addCard"
data-canuse
"{{item.cardStatus}}"
"../../../images/get-back-right.png"
"card-item-action-text"
"{{item.cardStatus == 3}}"
"../../../images/sold-back-right.png"
"{{item.cardStatus == 2}}"
"../../../images/get-back-right-grey.png"
该小程序已上线,上线时候发现这个问题很烦恼啊。可以搜索:"华冠购物指南"得到。
你好,请提供一下能复现问题的简单代码示例。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
回复4楼:使用webpack打包,设定scss-loader即可
请问怎么在小程序里面用scss啊。。。
可先忽略dialog相关信息。
@import
"./dialog/dialog.scss"
;
$footer-
height
:
120
rpx;
$footer-
border
:
2
rpx
solid
#cacaca
;
$title-
font-size
:
30
rpx;
$sub-title-
font-size
:
28
rpx;
$coupon-value-
font-size
:
48
rpx;
$card-item-
height
:
243
rpx;
.full-container {
position
:
absolute
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
background-color
:
#f9f9f9
;
}
.no-card-info {
font-size
:
28
rpx;
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
:
36
rpx;
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
:
32
rpx;
}
image {
background-color
:
transparent
;
}
.card-item {
display
: flex;
flex-
direction
: row;
margin-top
:
20
rpx;
filter: drop-shadow(
4
rpx
4
rpx
4
rpx
#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
:
67
rpx;
height
:$card-item-height;
}
.card-item-action {
width
:
185
rpx;
height
: $card-item-height;
line-height
:
260
rpx;
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
:
185
rpx;
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
:
12
rpx
0
;
height
:
48
rpx;
}
.card-item-vendor {
width
:
60
rpx;
white-space
:
nowrap
;
}
.card-item-name {
padding-left
:
8
rpx;
}
.card-item-body {
display
: flex;
flex-
direction
: row;
}
.card-item-logo {
display
: inline-
block
;
margin-left
:
4
rpx;
}
.card-item-value {
display
: flex;
flex-
direction
: row;
margin-top
:
-10
rpx;
margin-bottom
:
10
rpx;
}
.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
:
24
rpx;
color
:
#ababab
;
}
.card-item-time-limit {
font-size
:
24
rpx;
color
:
#ababab
;
}
.card-item-value-limit-
left
{
font-size
:
28
rpx;
color
:
#F8955F
;
padding-top
:
24
rpx;
padding-left
:
20
rpx;
}
.card-item-value-limit-
right
{
font-size
:
28
rpx;
color
:
#F8A71C
;
padding-top
:
24
rpx;
padding-left
:
20
rpx;
}
.card-item-value-limit-disabled {
color
:
#cbcbcb
;
font-size
:
28
rpx;
padding-top
:
24
rpx;
padding-left
:
20
rpx;
}
.card-item-image {
display
: inline-
block
;
width
:
53
rpx;
height
:
34
rpx;
}
<
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
>
该小程序已上线,上线时候发现这个问题很烦恼啊。可以搜索:"华冠购物指南"得到。
你好,请提供一下能复现问题的简单代码示例。