微信小程序fixed定位下scroll-view滚动失效

最新推荐文章于 2024-07-20 18:27:30 发布
最新推荐文章于 2024-07-20 18:27:30 发布
阅读量1.1w 收藏 1
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序


如图，上方nav是scroll-view的方式横向滚动，当给scroll-view的外出div加position: fixed; 定位时，scroll-view滚动就失效了。不知道大家有没有这种滚动的样例，固定在顶部，并且顶部nav可以横向滚动？谢谢

对应的wxml

<template name="search-fixed">
<view class="fixed-container">
    <view class="nav-container">
        <scroll-view class="nav-scroll nav-scroll-father" scroll-with-animation="true" scroll-x="true" style="width: 100%;display: {{navSonStatus?'none':'block'}}">
            <view class="nav-item" catchtap="navBack">所有商品</view>
            <block wx:for="{{navData.variety}}" wx:key="">
                <view class="nav-item {{variety==item.key?'nav-active':''}}" data-key="{{item.key}}" data-value="{{item.value}}" catchtap="navClick">
                    {{item.key}}
                </view>
            </block>
        </scroll-view>
        <scroll-view class="nav-scroll nav-scroll-son" scroll-x="true" style="width: 100%;display: {{navSonStatus?'block':'none'}}"  >
            <view class="nav-item nav-first" catchtap="navBack">所有</view>
            <view class="nav-item {{varietydetal?'nav-active':''}}nav-active" catchtap="navSonBack">所有{{variety}}</view>
            <block wx:for="{{navData.varietydetal}}" wx:key="">
                <view class="nav-item {{varietydetal==item.key?'nav-active':''}}" data-key="{{item.key}}" data-value="{{item.value}}" catchtap="navSonClick">
                        {{item.key}}
                </view>
            </block>
        </scroll-view>
    </view>
    <view class="order-container">
        <view class="order-item {{sortType==6?'order-active':''}}" data-index='6' catchtap="orderClick">
            <text>最新</text>
        </view>
        <view class="order-item {{sortType==5?'order-active':''}}" data-index='5' catchtap="orderClick">
            <text>折扣</text>
        </view>
        <view class="order-item {{sortType==4?'order-active':''}}" data-index='4' catchtap="orderClick">
            <text class="order-by order-by-{{isDesc?'down':'up'}}">价格</text>
        </view>
    </view>
</view>
</template>

对应的wxss

.fixed-container{
    /*position:fixed;*/
    top: 0;
    z-index: 999;   
}
.nav-container{ 
    border-bottom: 2rpx solid #ddd;
    background-color: #fff;
}
.nav-scroll{
    font-size: 0;
    position: relative;
    white-space: nowrap;
}
.nav-scroll-son .nav-item:first-child{
    white-space:nowrap;
}
.nav-item{
    vertical-align: top;
    display: inline-block;
    height: 94rpx;
    line-height: 94rpx;
    font-size: 28rpx;
    color: #333333;
    letter-spacing: 0;
    padding:0 22rpx;
    margin: 0 22rpx;
    border-bottom: 6rpx solid #fff;
}
.nav-active{
    font-weight: bold;
    border-bottom: 6rpx solid #333;
}
.nav-first{
    position: relative;
}
.nav-first:after{
    content: '';
    position: absolute;
    right: -22rpx;
    top: 45rpx;
    width: 8rpx;
    height: 8rpx;
    border-radius: 8rpx;
    background: #333333;
}
.order-container{   
    border-bottom: 2rpx solid #ddd;
    background-color: #fff;
    font-size: 0;
}
.order-item{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 249rpx;
    height: 48rpx;
    line-height: 48rpx;
    margin: 20rpx 0;
    font-size: 28rpx;
    color: #666666;
    letter-spacing: 0;
    text-align: center;
    border-right: 1px solid #eee;
}
.order-by{
    display: inline-block;
    padding-right: 28rpx;
}
.order-by:after,.order-active .order-by-up:after,.order-active .order-by-down:after{
    content: '';
    position: absolute;
    right: 80rpx;
    top: 10rpx;
    width: 18rpx;
    height: 26rpx;
    background-size: cover;
    background-repeat: no-repeat;
}
.order-by:after{    
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAnCAYAAAD+bDODAAAABGdBTUEAALGPC/xhBQAAA65JREFUWAntmLlSVEEUhpkZCGVHQ0ysUnHfsDCRGRZNeQKr2J/ABzFgD0wJSJVtMFKUstRSJDDBTLZhC9n8/kt31x3oYeZOEVl21Z2+ffqc85/zd/fpCyUlRbTx8fFEEWYl8ahGQ0NDVzOZzNLAwMCTqLaRwEZGRq4dHh7OHR0dXYnFYm+Gh4ebogDGClUW0MHBgYAuWRsAd3lv7+vr+2BlZ/UFgQ0ODl7HSToMFHK6U1pa2t7d3T0fknlf89IIVQ2AuIyUTTwef0G/YjyW7+/vT7KWjV6EkPBMsNHR0RtQl0b/orHZoW/v7e19TZ/kWTXyctZyKh9gThoFtLe3J6A64/AUXco6HAzZbsNCW39//ydjk9V5wYjwJpHOWiA54VFGH7OsGRjAubAuNLf29PQsnNQ9RSO77hbRuYxstD4gOcPpYllZmShd0xjbClHKpnqgcbhlgQkIWmYxqJUSQFuKMhct1lFXV9cP9FLor0uGfSXdNP7uWx31jkYiuY2SqKsJJo6B2nx0aN7XRD8+dESCYNHZ5Fi0ciw+Sz/IDN7vnARizsu7jHI1qP6eSCRSzG8YnSqOxTRB3NM4JiBtBsCqjUJWNEYWqfOwlBHNPPFNPOn8qG0ybrFpH4ui/1K+vpFhC2uYkTWJ7LIXtoI1o4JfRjbBrupksb9I4TyaYW2MdevA72/nE3S3WZzw/8t/Bv4pBsK7PNju3F31lJUJDnQntfDreWWL37vciWP466CYL8fMgX6HoF4nHsDUeQCqHlIGZ/Bbhd9lDvbTOGWlksEFhCor1ZSVGdU2jYttuloskPGhz4aquLIArBWhaqRaDaCzutuOh9F+dWkqYKyqjOWGZcuVKEWj68AqEcA6T1LXRqFwAkJ3mmB1eapt4COlwqyBu6lV6XXRMbmlCQxqedK6EDXO1yi6D9FxQCZYByR7B6aBuVqyAHXX6UtL87kam+wRellAukRtRtbO0WgF6hWlMa4w8jWMm1nfxbCe3sm8EQYmeZyu1shHf1Zm1hFOFzBug4ptI6tj0dME0WB11LPOjwlqKgykLy0fkPS9mWlCTfTQadOUa0xbJYBm6PkpIH12I3NzAKX0pRVoen7OBJO+aFL0vAZOAVvheUk2r3iC88ncKjQnfTTLh215waToycLa69tSf2Akla0T5njxrtlJXXbpPE6f8ejvMdeiAMmooMysdzZIE5S+NfT94VwmCWTJzufrC8rMOmFN3gP0nIx+sb2bowBZH5H7Yv9b8BcD1PHjTfcHtAAAAABJRU5ErkJggg==');
}
.order-active .order-by-up:after{   
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAnCAYAAAD+bDODAAAABGdBTUEAALGPC/xhBQAAA/tJREFUWAntmElTE0EUx7t7Jt5AUVFvIGKVOy5AolZZWQD1SpV3q2T9BH4QD6wevHLwLFuCHtiipRSiB5bgTUEF5ZjMtP83TjcTmJBMipNlVw29vfd+7/27MwQYK6PJR4+MMtyYCOqUuR29sLq+8XklErsb1JcHcViP3LuYs3hSSnmGcbbDmfmgPp2cLjVGyTAXlALotA4OIOP8/vn51zN67YBBSTJ+CScuoaJ8EAWVrIJJ+SoTjkYOYOitorDlptjlrJ3dBZF8QjzmnH9zokhWmbPt0UwkFtZRCwwOhK00Rq9wZuGM2CnHn7PfJFv9/NSLkDDjnLMNDbSssWLAgmdGIMnsJIJVK5ApxP2zc1Ozzhw/qGpvMpzxXyJktNXNJOeVjbf3ha3evnfVzrJJGDogCmKYAM2m5rzONCYgk1bKa4uKW8+lX6f32u6TcS2cuGZnua5IZesHomDn06klzkQcw02aSyaPQvax1eZoI829La8yAllWDhXJk2QE0DaybPPL0huExn/VoCR3fZkhWurnUu+UrYatNccaLGlP4iqfoM0gIBVsH5CzLSaMVgV0ZMw0Ra/vAwnuq7sK7Nefm3mzaBhmAjf2B+1DzipmW+PLkfhNmnMC5RhVxI47C3uyobWgba9KkOmnyURCyJDYgmS/KSDOZ0saZp7OQUFkXzefWjAZbyEIzbnkO8xg286ZZSLR2pwlX4akfFL79s17MjiM5h7Pc3HEbK+bTn7RMfGC1ZdFL/4f/Ffgn1LAe8ud6z48PFyTy+VeCiGedHV1fTisahH3RjabfY547b29veu8r6+vFpMpPDX4Vf8TwMRhAAcGBm7atj2BuFWIu26aZlQYhnEMkwos4sUpj1uWNdHf399A83Lb0NDQLQVyY1RiXiWoCsBasbjlbpwAdBIO18qBIdFGShi+Va7/D6WWfkVRNji3cWWEBL7jiXd3dy+WCiUQbMeR7DEFQoxET0/PAs3114LOzs530LUVm9u0AYeTeJLQ/irNi7XBwcEm2GiQm6wGkb+G0YSA6PKA0HoSt+oK7RdquGTNsMsD4S7kgchXy+gNRFm6zkfd9U04x3C+S147GqPyMBQYxaNt6Yz85M+rTAVC0DSc2yDFL3etGoeeRBKXlQ31OOcIkhrzgkKhUMFz9q1MBSR5MKZLU+mubSCBGA78E4FwoUa9ewAlOjo6Prq2+7oDYWRNMlH2GDpAwL7heYpqnuFxPp/Y24DMcT+ZKYZqRWFk6FOF8sf3FucPjDhVqxcLDHzPbK8tbuksgj7As+PdCwIiv5IqUwBckDuQ9JUr31d8LuNI5LPaL9aXVJkKgjOZBughKlrG9Y4FAakYgfuRkZGy/lvwB9C46LIQHAkxAAAAAElFTkSuQmCC');
}
.order-active .order-by-down:after{ 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAnCAYAAAD+bDODAAAABGdBTUEAALGPC/xhBQAABBRJREFUWAntWElTE0EU7p6eHEUQ1CN7lQvuQBCrNJkI6NUq71bJ+gv8IR5YPXjl4FVZsshBlkip5XYAWW5uBNSbmZn2e5PpcaITySAny65KevrNe+9739fLTMLYHtrk5KTYQxjTwgaNjo4ey+Vyb4eHhy+FjQ0FNj4+fty27bSUsplz/nBsbKwzDCAv15mALMsioKMqBoDfcN0zODg4r2x/6ssCGxkZOYEkKT+QL+lXXdd7+vr6Fny2wMtdZYRUJwHiMSI2mqbdQv/BzVhhmuYU5jIaiOAz/hFsYmKiBdKl4H/EjfmKvmdgYOA+egOfj669AnM5vRtgSRkJKJ/PE9BhN+FvchFrfzFg+wUqdA8NDS25MUVdIBgqPIVKkwqIkuBDjBaLojFwAdN+X8jc1d/fn/3V9zcZsepOozqPkao2CIiSIenrSCRCkn6iMWIPkqRYVK009rciMAKCLEkE1JATgHaoylKyqES9vb2v4JeA/2eyIb4S3QzyXVA+1HsyopIzcCLpqp0bBaDuIDnoflAj+ZGDtohTLHy2sS26sC2Wyd9hBt3P/gqEe4G6U1CpBqlfCiESuL/l+lRhW8ygiPM05gREiwFgh1yHompcW6guQKUcyYyPto1MtH+obWN8VdEumMJ/4/h6AYZXMYc5igaRb1gLO86c4QSvg+0BVtVtTPYzctiP5qp2D/N2A3k3vZxA9xaLZ/x/8V+Bf0oB/yp3lvtap1FrfzcfCK7drs9mnu8X243Wy+fynN/TBb9Rv5DZ4OsdsTrLlBnJZC2O5ZzOtMR+AK50GOe5Zc5KyapwkmxoERHTmMUqJZcHHDaSHTKZnF1rj5/5G3ar0fgFBUR5QKSC5+0qzWEh9C7OGZ2RdJBVW9JOrkUTp51xyK937bFWZtkOIyeU8y2llndEUTXMtmaIdiE//6xFpNE4P/eyXDwCkracARN6eNLTdwvrINGwlH7hDB2j++UAUlXKmZUP+K7tShsKnfbHCjxBFBBBFL0WNC2ml7nGuzjjOwV8WWPnWXK1Ndbi1hPYrV002gH0kxGKFEL3GKkgT0ZloN6tkoIPuvZPjIt4czb92u9H1+sd8ahl2lN+Xy3CEkHyFzFTiRqzj7NYqt1g+MW1HebMSq20xU8qH+rXo7EO07JIOq8ozrSS8xwIRoka5lNLBIi95zzFIdMRAtyMJui9vwBk21NY1xU0xmr+SEBNTzOvaBzUAmX0O5JMVP3PpHjH5/yOlPZd2Jz9SUCSCSNIZn+uXcHI2ZHLx6IoAX5gRDTdqF1MvvHbg65Lyuh3rl/MLIDNNUhKv8e8hmOobCAKKouZyr7aZnRKZj4i+QD0XhfSqFuYe6vu79aXxUwlacqmnnAhrgNoReg8HgZI5Qjdy5s39/RvwQ8WmvEYAZcRcwAAAABJRU5ErkJggg==');
}
.order-item:last-child{
    border-right:none;
}
.order-active{
    color: #DB343E;
}

如图，上方nav是scroll-view的方式横向滚动，当给scroll-view的外出div加position: fixed; 定位时，scroll-view滚动就失效了。不知道大家有没有这种滚动的样例，固定在顶部，并且顶部nav可以横向滚动？谢谢

对应的wxml

<template name="search-fixed">
<view class="fixed-container">
    <view class="nav-container">
        <scroll-view class="nav-scroll nav-scroll-father" scroll-with-animation="true" scroll-x="true" style="width: 100%;display: {{navSonStatus?'none':'block'}}">
            <view class="nav-item" catchtap="navBack">所有商品</view>
            <block wx:for="{{navData.variety}}" wx:key="">
                <view class="nav-item {{variety==item.key?'nav-active':''}}" data-key="{{item.key}}" data-value="{{item.value}}" catchtap="navClick">
                    {{item.key}}
                </view>
            </block>
        </scroll-view>
        <scroll-view class="nav-scroll nav-scroll-son" scroll-x="true" style="width: 100%;display: {{navSonStatus?'block':'none'}}"  >
            <view class="nav-item nav-first" catchtap="navBack">所有</view>
            <view class="nav-item {{varietydetal?'nav-active':''}}nav-active" catchtap="navSonBack">所有{{variety}}</view>
            <block wx:for="{{navData.varietydetal}}" wx:key="">
                <view class="nav-item {{varietydetal==item.key?'nav-active':''}}" data-key="{{item.key}}" data-value="{{item.value}}" catchtap="navSonClick">
                        {{item.key}}
                </view>
            </block>
        </scroll-view>
    </view>
    <view class="order-container">
        <view class="order-item {{sortType==6?'order-active':''}}" data-index='6' catchtap="orderClick">
            <text>最新</text>
        </view>
        <view class="order-item {{sortType==5?'order-active':''}}" data-index='5' catchtap="orderClick">
            <text>折扣</text>
        </view>
        <view class="order-item {{sortType==4?'order-active':''}}" data-index='4' catchtap="orderClick">
            <text class="order-by order-by-{{isDesc?'down':'up'}}">价格</text>
        </view>
    </view>
</view>
</template>

对应的wxss

.fixed-container{
    /*position:fixed;*/
    top: 0;
    z-index: 999;   
}
.nav-container{ 
    border-bottom: 2rpx solid #ddd;
    background-color: #fff;
}
.nav-scroll{
    font-size: 0;
    position: relative;
    white-space: nowrap;
}
.nav-scroll-son .nav-item:first-child{
    white-space:nowrap;
}
.nav-item{
    vertical-align: top;
    display: inline-block;
    height: 94rpx;
    line-height: 94rpx;
    font-size: 28rpx;
    color: #333333;
    letter-spacing: 0;
    padding:0 22rpx;
    margin: 0 22rpx;
    border-bottom: 6rpx solid #fff;
}
.nav-active{
    font-weight: bold;
    border-bottom: 6rpx solid #333;
}
.nav-first{
    position: relative;
}
.nav-first:after{
    content: '';
    position: absolute;
    right: -22rpx;
    top: 45rpx;
    width: 8rpx;
    height: 8rpx;
    border-radius: 8rpx;
    background: #333333;
}
.order-container{   
    border-bottom: 2rpx solid #ddd;
    background-color: #fff;
    font-size: 0;
}
.order-item{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 249rpx;
    height: 48rpx;
    line-height: 48rpx;
    margin: 20rpx 0;
    font-size: 28rpx;
    color: #666666;
    letter-spacing: 0;
    text-align: center;
    border-right: 1px solid #eee;
}
.order-by{
    display: inline-block;
    padding-right: 28rpx;
}
.order-by:after,.order-active .order-by-up:after,.order-active .order-by-down:after{
    content: '';
    position: absolute;
    right: 80rpx;
    top: 10rpx;
    width: 18rpx;
    height: 26rpx;
    background-size: cover;
    background-repeat: no-repeat;
}
.order-by:after{    
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAnCAYAAAD+bDODAAAABGdBTUEAALGPC/xhBQAAA65JREFUWAntmLlSVEEUhpkZCGVHQ0ysUnHfsDCRGRZNeQKr2J/ABzFgD0wJSJVtMFKUstRSJDDBTLZhC9n8/kt31x3oYeZOEVl21Z2+ffqc85/zd/fpCyUlRbTx8fFEEWYl8ahGQ0NDVzOZzNLAwMCTqLaRwEZGRq4dHh7OHR0dXYnFYm+Gh4ebogDGClUW0MHBgYAuWRsAd3lv7+vr+2BlZ/UFgQ0ODl7HSToMFHK6U1pa2t7d3T0fknlf89IIVQ2AuIyUTTwef0G/YjyW7+/vT7KWjV6EkPBMsNHR0RtQl0b/orHZoW/v7e19TZ/kWTXyctZyKh9gThoFtLe3J6A64/AUXco6HAzZbsNCW39//ydjk9V5wYjwJpHOWiA54VFGH7OsGRjAubAuNLf29PQsnNQ9RSO77hbRuYxstD4gOcPpYllZmShd0xjbClHKpnqgcbhlgQkIWmYxqJUSQFuKMhct1lFXV9cP9FLor0uGfSXdNP7uWx31jkYiuY2SqKsJJo6B2nx0aN7XRD8+dESCYNHZ5Fi0ciw+Sz/IDN7vnARizsu7jHI1qP6eSCRSzG8YnSqOxTRB3NM4JiBtBsCqjUJWNEYWqfOwlBHNPPFNPOn8qG0ybrFpH4ui/1K+vpFhC2uYkTWJ7LIXtoI1o4JfRjbBrupksb9I4TyaYW2MdevA72/nE3S3WZzw/8t/Bv4pBsK7PNju3F31lJUJDnQntfDreWWL37vciWP466CYL8fMgX6HoF4nHsDUeQCqHlIGZ/Bbhd9lDvbTOGWlksEFhCor1ZSVGdU2jYttuloskPGhz4aquLIArBWhaqRaDaCzutuOh9F+dWkqYKyqjOWGZcuVKEWj68AqEcA6T1LXRqFwAkJ3mmB1eapt4COlwqyBu6lV6XXRMbmlCQxqedK6EDXO1yi6D9FxQCZYByR7B6aBuVqyAHXX6UtL87kam+wRellAukRtRtbO0WgF6hWlMa4w8jWMm1nfxbCe3sm8EQYmeZyu1shHf1Zm1hFOFzBug4ptI6tj0dME0WB11LPOjwlqKgykLy0fkPS9mWlCTfTQadOUa0xbJYBm6PkpIH12I3NzAKX0pRVoen7OBJO+aFL0vAZOAVvheUk2r3iC88ncKjQnfTTLh215waToycLa69tSf2Akla0T5njxrtlJXXbpPE6f8ejvMdeiAMmooMysdzZIE5S+NfT94VwmCWTJzufrC8rMOmFN3gP0nIx+sb2bowBZH5H7Yv9b8BcD1PHjTfcHtAAAAABJRU5ErkJggg==');
}
.order-active .order-by-up:after{   
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAnCAYAAAD+bDODAAAABGdBTUEAALGPC/xhBQAAA/tJREFUWAntmElTE0EUx7t7Jt5AUVFvIGKVOy5AolZZWQD1SpV3q2T9BH4QD6wevHLwLFuCHtiipRSiB5bgTUEF5ZjMtP83TjcTmJBMipNlVw29vfd+7/27MwQYK6PJR4+MMtyYCOqUuR29sLq+8XklErsb1JcHcViP3LuYs3hSSnmGcbbDmfmgPp2cLjVGyTAXlALotA4OIOP8/vn51zN67YBBSTJ+CScuoaJ8EAWVrIJJ+SoTjkYOYOitorDlptjlrJ3dBZF8QjzmnH9zokhWmbPt0UwkFtZRCwwOhK00Rq9wZuGM2CnHn7PfJFv9/NSLkDDjnLMNDbSssWLAgmdGIMnsJIJVK5ApxP2zc1Ozzhw/qGpvMpzxXyJktNXNJOeVjbf3ha3evnfVzrJJGDogCmKYAM2m5rzONCYgk1bKa4uKW8+lX6f32u6TcS2cuGZnua5IZesHomDn06klzkQcw02aSyaPQvax1eZoI829La8yAllWDhXJk2QE0DaybPPL0huExn/VoCR3fZkhWurnUu+UrYatNccaLGlP4iqfoM0gIBVsH5CzLSaMVgV0ZMw0Ra/vAwnuq7sK7Nefm3mzaBhmAjf2B+1DzipmW+PLkfhNmnMC5RhVxI47C3uyobWgba9KkOmnyURCyJDYgmS/KSDOZ0saZp7OQUFkXzefWjAZbyEIzbnkO8xg286ZZSLR2pwlX4akfFL79s17MjiM5h7Pc3HEbK+bTn7RMfGC1ZdFL/4f/Ffgn1LAe8ud6z48PFyTy+VeCiGedHV1fTisahH3RjabfY547b29veu8r6+vFpMpPDX4Vf8TwMRhAAcGBm7atj2BuFWIu26aZlQYhnEMkwos4sUpj1uWNdHf399A83Lb0NDQLQVyY1RiXiWoCsBasbjlbpwAdBIO18qBIdFGShi+Va7/D6WWfkVRNji3cWWEBL7jiXd3dy+WCiUQbMeR7DEFQoxET0/PAs3114LOzs530LUVm9u0AYeTeJLQ/irNi7XBwcEm2GiQm6wGkb+G0YSA6PKA0HoSt+oK7RdquGTNsMsD4S7kgchXy+gNRFm6zkfd9U04x3C+S147GqPyMBQYxaNt6Yz85M+rTAVC0DSc2yDFL3etGoeeRBKXlQ31OOcIkhrzgkKhUMFz9q1MBSR5MKZLU+mubSCBGA78E4FwoUa9ewAlOjo6Prq2+7oDYWRNMlH2GDpAwL7heYpqnuFxPp/Y24DMcT+ZKYZqRWFk6FOF8sf3FucPjDhVqxcLDHzPbK8tbuksgj7As+PdCwIiv5IqUwBckDuQ9JUr31d8LuNI5LPaL9aXVJkKgjOZBughKlrG9Y4FAakYgfuRkZGy/lvwB9C46LIQHAkxAAAAAElFTkSuQmCC');
}
.order-active .order-by-down:after{ 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAnCAYAAAD+bDODAAAABGdBTUEAALGPC/xhBQAABBRJREFUWAntWElTE0EU7p6eHEUQ1CN7lQvuQBCrNJkI6NUq71bJ+gv8IR5YPXjl4FVZsshBlkip5XYAWW5uBNSbmZn2e5PpcaITySAny65KevrNe+9739fLTMLYHtrk5KTYQxjTwgaNjo4ey+Vyb4eHhy+FjQ0FNj4+fty27bSUsplz/nBsbKwzDCAv15mALMsioKMqBoDfcN0zODg4r2x/6ssCGxkZOYEkKT+QL+lXXdd7+vr6Fny2wMtdZYRUJwHiMSI2mqbdQv/BzVhhmuYU5jIaiOAz/hFsYmKiBdKl4H/EjfmKvmdgYOA+egOfj669AnM5vRtgSRkJKJ/PE9BhN+FvchFrfzFg+wUqdA8NDS25MUVdIBgqPIVKkwqIkuBDjBaLojFwAdN+X8jc1d/fn/3V9zcZsepOozqPkao2CIiSIenrSCRCkn6iMWIPkqRYVK009rciMAKCLEkE1JATgHaoylKyqES9vb2v4JeA/2eyIb4S3QzyXVA+1HsyopIzcCLpqp0bBaDuIDnoflAj+ZGDtohTLHy2sS26sC2Wyd9hBt3P/gqEe4G6U1CpBqlfCiESuL/l+lRhW8ygiPM05gREiwFgh1yHompcW6guQKUcyYyPto1MtH+obWN8VdEumMJ/4/h6AYZXMYc5igaRb1gLO86c4QSvg+0BVtVtTPYzctiP5qp2D/N2A3k3vZxA9xaLZ/x/8V+Bf0oB/yp3lvtap1FrfzcfCK7drs9mnu8X243Wy+fynN/TBb9Rv5DZ4OsdsTrLlBnJZC2O5ZzOtMR+AK50GOe5Zc5KyapwkmxoERHTmMUqJZcHHDaSHTKZnF1rj5/5G3ar0fgFBUR5QKSC5+0qzWEh9C7OGZ2RdJBVW9JOrkUTp51xyK937bFWZtkOIyeU8y2llndEUTXMtmaIdiE//6xFpNE4P/eyXDwCkracARN6eNLTdwvrINGwlH7hDB2j++UAUlXKmZUP+K7tShsKnfbHCjxBFBBBFL0WNC2ml7nGuzjjOwV8WWPnWXK1Ndbi1hPYrV002gH0kxGKFEL3GKkgT0ZloN6tkoIPuvZPjIt4czb92u9H1+sd8ahl2lN+Xy3CEkHyFzFTiRqzj7NYqt1g+MW1HebMSq20xU8qH+rXo7EO07JIOq8ozrSS8xwIRoka5lNLBIi95zzFIdMRAtyMJui9vwBk21NY1xU0xmr+SEBNTzOvaBzUAmX0O5JMVP3PpHjH5/yOlPZd2Jz9SUCSCSNIZn+uXcHI2ZHLx6IoAX5gRDTdqF1MvvHbg65Lyuh3rl/MLIDNNUhKv8e8hmOobCAKKouZyr7aZnRKZj4i+QD0XhfSqFuYe6vu79aXxUwlacqmnnAhrgNoReg8HgZI5Qjdy5s39/RvwQ8WmvEYAZcRcwAAAABJRU5ErkJggg==');
}
.order-item:last-child{
    border-right:none;
}
.order-active{
    color: #DB343E;
}
奋斗年轻人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
微信小程序scroll-view无法准确滚动到页面最底部
TrZoey的博客
04-12 1万+
最近在做一个模拟微信聊天页面的小程序，在使用&lt;scroll-view&gt;组件的scroll-into-view属性使页面自动滚动到页面最底部的时候，发现经常出现滚了一半又滚回去了。后来发现是因为我发出一条消息之后服务器会立刻返回一条消息，短时间内改变了 scroll-into-view 的值两次，而微信所有的方法都是异步的，有可能左侧的消息比较长，向下滚动了一半的时候右侧出发了滚动事件，...
微信小程序开发——scroll-view里边放fixed元素后样式错乱
热门推荐
张静的博客
03-14 1万+
问题描述： scroll-view,里面的自定义组件中包含一个fixed弹框，但这个弹框无论怎么设置层级，只能显示在当前scroll-view的有效宽度内。安卓、开发工具都正常。ios不行。 原因： 因为 iOS 下加了 -webkit-overflow-scrolling: touch，这个会产生滚动惯性，体验更好，但会改变 fixed 的行为，建议不在 scroll-view 里有 fixed 元素 解决： 将scroll-view标签改为view，并设置样式： overflow-x: hidden
uni-app：踩坑路---scroll-view内使用fixed定位，无效的问题
最新发布
本以为成功很简单，没想到活成普通人都需拼尽全力！
07-20 872
emmm，说起来这个问题整得还挺好笑的，本人在公司内，奋笔疾书写代码，愉快的提交测试的时候，测试跟我说，在苹果手机上你这个样式有bug，我倒是要看看，是什么bug。安卓vs苹果ok，我相信已经看出了差异了，安卓的遮罩层正常显示，而苹果的遮罩层只在我的绿色框内，被截断了，我赶忙看代码：CustomItem.vue：自定义组件蓝色的正方形，外加上一个遮罩层，点击蓝色方块的时候，显示遮罩层，遮罩层内写我的要展示的一些内容。
微信小程序 - - - - - scrill-view内元素使用fixed无效问题
Dark_programmer的博客
10-20 2902
scroll-view fixed无效
小程序中 scroll-view 里面包括的 固定定位fixed 元素 不生效得问题
业余前端的职业经历
07-28 4995
因为要做 触底加载更多的功能 所以我把整个页面的元素放入到 scroll-view中 但是出现了一个 问题 原来 点击一个元素 弹出 固定定位的悬浮框出不来了 view{ position:fixed; } <scroll-view> 内容部分 <view></view> </scroll-view> 解决方法 吧 定位的那个元素拿出来 就可以了 <scroll-view> 内容元素 </scroll-view> &lt
微信小程序fixed定位后scroll-view滚动失效问题
lindali1115的博客
10-10 3505
如图微信小程序中 scroll-view组件外div加display：flxed或者是absolute后， scroll-view组件滚动失效。 解决办法: scroll-view宽度为屏幕宽度， 子元素view.cont设置overflow:auto;内容超出屏幕会出滚动条，然后便可以拖动了， 最外层header设置overflow-y: hidden;隐藏滚动条，实...
微信小程序 解决 当套在scroll-view中后 wx.pageScrollTo 函数失效问题解决
weixin_45966674的博客
09-13 1053
pageScrollTo 只是 页面的API 他对 scroll-view 的滚动是无法控制的。而且 触发后 也不会影响继续滚动 继续滚动后再次点击 依旧会滚动到指定位置 还是非常好用的。但是 scroll-view 也提供了一个scroll-into-view属性。然后 我们可以运行代码 你会发现 点击后 他会滚动到指定位置。关键在于scroll-into-view 指定滚动id位置。wxss 参考代码如下。wxml 参考代码如下。
小程序fiexd定位后sroll-view失效
゛Pudding
11-19 149
1、wxml部分 <view class="cont"> <scroll-view scroll-x class="nav classify" scroll-with-animation scroll-left="{{scrollLeft}}"> <view class="item {{index==TabCur?'cur':''}}" wx:for="{{productCategories}}" wx:key
解决微信小程序自定义弹窗滚动与页面滚动冲突
qq_39958629的博客
04-22 2668
先看效果是否是自己需要的 实现步骤： 1.整个布局用作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性 2.样式文件中设置Page的overflow-y属性值为hidden 3.样式文件中设置scroll-view的height属性值为100% 4.打开自定义弹窗的点击事件中，更改isScroll的值为false，关闭弹窗的点击事件中，更改isScroll的值为t...
微信小程序滚动Tab选项卡：左右滑动切换、触底加载分页
kingAn123的博客
05-05 9072
文章目录效果图一、顶部标签栏二、列表内容部分swiper组件高度及上下滚动样式三、数据结构及赋值方法四、scroll组件触底事件(分页相关五、scroll组件的高度样式swiper组件scroll组件样式区别六、其他 效果图 一、顶部标签栏 定位顶部便签栏，使用color-ui的组件样式实现 <scroll-view scroll-x class="bg-white nav my-...
使用CSS样式position:fixed水平滚动的方法
09-04
主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下
微信小程序长图超过屏幕页面不能下拉_微信小程序的页面弹窗过长滚动导致的底层滚动（滚动穿透问题）解决办法...
weixin_39576127的博客
02-05 2749
对于微信小程序，弹窗时，如果弹窗内容过长，需要滚动，滚动同时，底部页面跟着滚动，这如何优雅的处理这个问题？处理1(不推荐)： --添加position:fixed弹窗时通过给底部最大的view标签添加position:fixed;，从而达到页面不会跟着弹窗滚动超长底部内容弹窗超长内容缺点：在取消了该属性后，页面自动滚动回页面顶部，失败。处理2(不推荐)：--添加catchtouchmove 事...
mpvue,uni-app开发微信小程序遇到的坑，直接在组件上写样式失效
qq_37672347的博客
08-28 2859
1、问题，在组件上直接写样式在小程序中不生效。 解决办法（<picker>中最好写一个<view class="style">写样式，而不是在picker上加样式。） 2、组件内引入图片要使用绝对路径。/static/... 3、对象的最后一个元素不能写逗号, 4、主页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用5、...
微信小程序 scroll-view失效问题
black1java的博客
02-02 657
记录嵌套在swiper-item里面的scroll-view失效问题，height设置为。在css中加入以下代码 可以隐藏滚动条。scroll-view 使用步骤。
微信小程序 scroll-view 横向不滚动/隐藏滚动条
zhaohanqq的博客
11-18 4987
1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示； 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的； 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排； 4.包裹 scroll-view 的元素要加上样式–&gt; overflow:hidden;whit...
微信小程序使用fix定位，发现scroll-view横向滚动失效
weixin_42488377的博客
11-15 1263
如果定位写在scroll-view的父盒子上，那么scroll-view横向就会失效，只能将定位写在scroll-view标签上
uniapp scroll-view固定定位后无法滑动解决方案
m0_46365130的博客
05-11 2614
添加一下css代码 width: 100%; overflow-x: auto;
scrollIntoView()，头部有fixed布局会导致滚动条丢失精度的问题，怎么办
u012732909的博客
07-24 1265
使用CSS的scroll-margin-top属性，在元素滚动到达时添加一个额外的距离，以避免滚动到头部fixed布局之下。
微信小程序scroll-view scroll-into-view
10-13
微信小程序中的 scroll-view 组件可以实现滚动视图的效果，而 scroll-into-view 属性可以让指定的某个子组件滚动到视图中。当 scroll-into-view 的值为某个子组件的 id 时，该子组件就会滚动到 scroll-view 的顶部或...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值