当前位置:首页 > 微信 > 正文

微信小程序横向滚动

11-25 微信

标签:ace   hit   containe   pre   key   遇到   name   nav   item   

scroll-view

小程序的scroll-view 处理横向滚动遇到的问题

html页面

注意:scroll-view 不用设置宽度;auto 就OK

<view class=scroll-product>
        <scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
            <block wx:for="{{fastList}}" wx:key>
                <navigator hover-class="none" class=item url=‘‘>
                    <view class=pro-info line1>{{item.name}}</view>
                </navigator>
            </block>
        </scroll-view>
    </view>

css

注意:scroll-view 的外层元素一定要设置不要换行

.orderPage_container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;
}

.scroll-product {
    white-space: nowrap;
    margin-top: 38rpx;
    padding: 0 30rpx 37rpx 30rpx;
}

.item {
    width: 180rpx;
    display: inline-block;
    margin-right: 19rpx;
    border-bottom: 4rpx solid #47b479;
    box-shadow: 0 40rpx 30rpx -10rpx #eee;
}

.pro-info {
    font-size: 20px;
    color: #333;
}

js

data: {
        fastList: [
            {
                name: ds1
            },
            {
                name: ds2
            },
            {
                name: ds3
            },
            {
                name: ds4
            },
            {
                name: ds5
            }
        ]
    },

 

微信小程序横向滚动

标签:ace   hit   containe   pre   key   遇到   name   nav   item   

温馨提示: 本文由杰米博客推荐,转载请保留链接: https://www.jmwww.net/weixin/15494.html

博客主人杰米WWW
杰米博客,为大家提供seo以及it方面技巧喜欢的朋友收藏哦!
  • 11365文章总数
  • 2266821访问次数
  • 建站天数
  • 头条文章

    图文推荐

    站长推荐

    友情链接