iphone6样式混乱,兼容了filex
发布于 6 年前 作者 echeng 11832 次浏览 来自 问答

这个是正常显示的,

这个是iphone6上显示的

这是wxml

<view class=‘list’ hidden=’{{collectList.length == 0}}’ hidden=’{{showType==2}}’>

<view class=‘goods’ >

<block wx:for=’{{collectList}}’ wx:key=‘index’ wx:for-index=‘findex’>

<view class=‘part’ data-item=’{{item}}’ data-index=’{{findex}}’>

<image src=’{{item.image}}’ bindtap=‘goToStore’ data-item=’{{item}}’ data-index=’{{findex}}’></image>

<view class=‘rb’>

<view class=‘rInfo’>

<view class=‘info’ bindtap=‘goToStore’ data-item=’{{item}}’ data-index=’{{findex}}’>

<text>{{item.store_name}}</text>

<view class=‘money’>

<text wx:if=’{{item.titel_price}}’>{{item.titel_price}}</text>

<text wx:else>¥{{item.price}}</text>

<text hidden=’{{item.titel_price}}’>/{{item.unit_name}}</text>

</view>

</view>

<view class=‘carnum acea-row {{item.cart_num<1?"":“showBorder”}}’ wx:if=’{{item.productValue==""}}’>

<view class=‘redu’ catchtap=‘colsubCart’ data-index="{{findex}}" data-item=’{{item}}’></view>

<view class=“reduce {{item.numSub ? ‘on’ : ‘’}}” hidden=’{{item.cart_num<1}}’ catchtap=‘colsubCart’ data-index="{{findex}}" data-item=’{{item}}’>-</view>

<view class=’{{item.cart_num<1?“null”:“num”}}’>{{item.cart_num}}</view>

<view class=“plus {{item.numAdd ? ‘on’ : ‘’}}” catchtap=‘coladdCart’ data-index="{{findex}}" data-item=’{{item}}’>+</view>

<view class=‘adds’ catchtap=‘coladdCart’ data-index="{{findex}}" data-item=’{{item}}’>

</view>

</view>

<view class=‘jt’ wx:else catchtap=‘collshowList’ data-item=’{{item}}’ data-index=’{{findex}}’>

<image src=’{{item.is_show?"/images/up.png":"/images/down.png"}}’></image>

<view class=‘big’ catchtap=‘collshowList’ data-item=’{{item}}’ data-index=’{{findex}}’></view>

</view>

</view>

<view class=‘norm’ hidden=’{{item.is_show==false}}’>

<block wx:for=’{{item.productValue}}’ wx:for-item=‘j’ wx:key=‘index’ data-index=’{{findex}}’>

<view class=‘xq’>

<view class=‘sonC’>

<view class=‘money’>

<text style=‘color:#A4A4A4’>¥{{j.price}}</text>

<text>/{{j.suk}}</text>

</view>

<view class=‘money’>

<text>¥{{j.average}}</text>

<text>/{{item.unit_name}}</text>

</view>

</view>

<view class=‘carnum acea-row {{j.cart_num<1?"":“showBorder”}}’>

<view class=‘redu’ catchtap=‘collSubCart’ data-name=’{{findex}}’ data-index="{{index}}" data-item=’{{j}}’></view>

<view class=“reduce {{j.numSub ? ‘on’ : ‘’}}” hidden=’{{j.cart_num<1}}’ catchtap=‘collSubCart’ data-name=’{{findex}}’ data-index="{{index}}" data-item=’{{j}}’>-</view>

<view class=’{{j.cart_num<1?“null”:“num”}}’ hidden=’{{j.cart_num<1}}’>{{j.cart_num}}</view>

<view class=“plus {{j.numAdd ? ‘on’ : ‘’}}” catchtap=‘collAddCart’ data-name=’{{findex}}’ data-index="{{index}}" data-item=’{{j}}’>+</view>

<view class=‘adds’ catchtap=‘collAddCart’ data-name=’{{findex}}’ data-index="{{index}}" data-item=’{{j}}’>

</view>

</view>

</view>

</block>

</view>

</view>

</view>

</block>

</view>

</view>

这是样式

.list {

width: 94%;

height: 100%;

background-color: #fff;

display: flex;

display: -webkit-box;

display: -webkit-flex;

flex-direction: column;

-webkit-flex-direction: column;

align-items: center;

-webkit-align-items: center;

border-radius:0 0 20rpx 20rpx;

}

.goods {

width: 100%;

display: flex;

display: -webkit-box;

display: -webkit-flex;

flex-direction: column;

-webkit-flex-direction: column;

align-items: center;

-webkit-align-items: center;

position: relative;

}

.part {

width: 94%;

height: 100%;

padding: 20rpx 0;

display: flex;

display: -webkit-box;

display: -webkit-flex;

align-items: flex-start;

-webkit-align-items: flex-start;

justify-content: space-between;

-webkit-justify-content: space-between;

position: relative;

border-top: 1px solid #eee;

}

.part image {

width: 128rpx;

height: 128rpx;

border-radius: 8rpx;

}

.rb {

width: 78%;

display: flex;

display: -webkit-box;

display: -webkit-flex;

flex-direction: column;

-webkit-flex-direction: column;

align-items: center;

-webkit-align-items: center;

justify-content: center;

-webkit-justify-content: center;

}

.rInfo {

width: 100%;

display: flex;

display: -webkit-box;

display: -webkit-flex;

align-items: center;

-webkit-align-items: center;

justify-content: space-between;

-webkit-justify-content: space-between;

padding-bottom: 10rpx;

color: #000000;

}

.info {

width: 300rpx;

height: 128rpx;

display: flex;

display: -webkit-box;

display: -webkit-flex;

flex-direction: column;

-webkit-flex-direction: column;

align-items: flex-start;

-webkit-align-items: flex-start;

justify-content: space-between;

-webkit-justify-content: space-between;

font-size: 30rpx;

}

.info .money {

width: 100%;

display: flex;

display: -webkit-box;

display: -webkit-flex;

align-items: flex-end;

-webkit-align-items: flex-end;

justify-content: flex-start;

-webkit-justify-content: flex-start;

}

.info .money text:nth-child(1) {

color: #ff1212;

font-weight: 400;

font-size: 36rpx;

}

.info .money text:nth-child(2) {

width: 40%;

color: #A4A4A4;

font-size: 24rpx;

}

.figure {

width: 160rpx;

height: 140rpx;

display: flex;

display: -webkit-box;

display: -webkit-flex;

align-items: center;

-webkit-align-items: center;

justify-content: space-around;

-webkit-justify-content: space-around;

font-size: 30rpx;

}

.figure view {

width: 40rpx;

height: 40rpx;

display: flex;

display: -webkit-box;

display: -webkit-flex;

align-items: center;

-webkit-align-items: center;

justify-content: center;

-webkit-justify-content: center;

}

.figure text {

width: 40rpx;

height: 40rpx;

text-align: center;

line-height: 40rpx;

}

.carnum {

width: 192rpx;

height: 54rpx;

margin-right: 20rpx;

display: flex;

display: -webkit-box;

display: -webkit-flex;

align-items: center;

-webkit-align-items: center;

justify-content: flex-end;

-webkit-justify-content: flex-end;

border: 1px solid #fff;

position: relative;

}

.carnum view {

width: 50rpx;

text-align: center;

height: 100%;

line-height: 48rpx;

font-size: 32rpx;

}

.carnum .reduce {

border-right: 0;

border-radius: 26rpx;

background-color: #fec94a;

}

.carnum .reduce.on {

border-color: #e3e3e3;

color: #dedede;

}

.carnum .plus {

border-left: 0;

border-radius: 26rpx;

background-color: #fec94a;

font-weight: 400;

}

.carnum .num {

width: 88rpx;

color: #282828;

display: flex;

display: -webkit-box;

display: -webkit-flex;

align-items: center;

align-items: -webkit-center;

justify-content: center;

-webkit-justify-content: center;

border-right: none;

border-left: none;

}

.norm {

width: 100%;

display: flex;

display: -webkit-box;

display: -webkit-flex;

flex-direction: column;

-webkit-flex-direction: column;

align-items: center;

-webkit-align-items: center;

}

.norm .xq {

width: 100%;

height: 108rpx;

display: flex;

display: -webkit-box;

display: -webkit-flex;

align-items: center;

-webkit-align-items: center;

justify-content: space-between;

-webkit-justify-content: space-between;

background-color: #fff;

border-top: 1px solid #eee;

margin-top: 20rpx;

}

.xq .sonC {

width: 300rpx;

height: 108rpx;

display: flex;

display: -webkit-box;

display: -webkit-flex;

flex-direction: column;

-webkit-flex-direction: column;

align-items: flex-start;

-webkit-align-items: flex-start;

justify-content: center;

-webkit-justify-content: center;

}

.xq .sonC .money text:nth-child(1) {

color: #ff1212;

font-size: 32rpx;

}

.xq .sonC .money text:nth-child(2) {

color: #a4a4a4;

font-size: 28rpx;

}

.rInfo .jt {

width: 50rpx;

height: 50rpx;

background-color: #fec94a;

display: flex;

display: -webkit-box;

display: -webkit-flex;

align-items: center;

-webkit-align-items: center;

justify-content: center;

-webkit-justify-content: center;

border-radius: 50%;

margin-right: 20rpx;

position: relative;

}

.rInfo .jt image {

width: 30rpx;

height: 30rpx;

border-radius: 30rpx;

}

.showBorder {

border: 1px solid #eee;

border-radius: 30rpx;

}

.null {

display: none;

color: #fff;

}

.carnum .adds {

width: 100rpx;

height: 100rpx;

position: absolute;

right: -40rpx;

}

.carnum .redu {

width: 100rpx;

height: 100rpx;

position: absolute;

left: -20rpx;

}

.jt .big {

width: 100rpx;

height: 100rpx;

position: absolute;

}

2 回复

麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的这种格式的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

回到顶部