弹性布局左右滑动

待我称王封你为后i 2023-01-15 10:26 350阅读 0赞

弹性布局用起来是真的方便，但是今天老板要实现左右滑动的效果，这可为难我了，翻阅资料，终于找到方法了，上代码。

<view class="content">
        <view v-for=" i in 6" :key="i" class="btn">
            按钮{
   {i}}
        </view>
</view>
.content{
        display: flex;
        overflow-x: auto;
    }
    .btn {
        width: 100rpx;
        background-color: #FBBE75;
        color: #fff;
        width: 180rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        margin-right: 10rpx;
        /*很重要，禁止子元素的收缩*/
        flex-shrink: 0;
    }

最重要的就是父元素要设置overflow-x:auto; 子元素要设置 flex-shrink:0;

这样就可以实现弹性布局左右滑动啦。看看效果。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWNob25nMTIz_size_16_color_FFFFFF_t_70

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWNob25nMTIz_size_16_color_FFFFFF_t_70 1

发表评论取消回复

表情：

评论列表（有 0 条评论，350人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS对齐弹性布局中左右对齐

CSS对齐弹性布局中左右对齐 <view class='li'> <view>产品名称</view> <view>猪肉</view>

一时失言乱红尘/ 2023年06月25日 02:27/ 0 赞/ 141 阅读

相关弹性布局

弹性布局(给父元素设置) 开启弹性布局 dispaly:fix; flew-direction 确定主轴的位置 row 从左往右 row-reverse 从右往

╰半橙微兮°/ 2023年05月31日 07:25/ 0 赞/ 279 阅读

相关弹性布局左右滑动

弹性布局用起来是真的方便，但是今天老板要实现左右滑动的效果，这可为难我了，翻阅资料，终于找到方法了，上代码。 <view class="content">

待我称王封你为后i/ 2023年01月15日 10:26/ 0 赞/ 351 阅读

相关 Flex弹性布局

简介 > Flexible Box的缩写，弹性布局，为盒模型提供最大的灵活性容器任何容器都可以指定Flex布局，设置后，子元素的float,clear,ver

╰+攻爆jí腚メ/ 2023年01月02日 15:28/ 0 赞/ 406 阅读

相关移动端解决左右滑动的纯css布局

移动端解决左右滑动的纯css布局 ![在这里插入图片描述][20210529164745206.gif] <!DOCTYPE html> <html>

àì夳堔傛蜴生んèń/ 2022年10月16日 09:54/ 0 赞/ 300 阅读

相关实现卡片布局，左右滑动

人人影视版特点（需求）：动画：最多可见的这四层，在顶层卡片滑动时，每一层都会位移&放大动画，有种补充到顶层的感觉。动画：松手时，如果未被判定为删除，则会有顶层

谁借莪１个温暖的怀抱￠/ 2022年07月11日 04:27/ 0 赞/ 471 阅读

相关左右滑动swiper

转自：http://blog.csdn.net/xieshunhai/article/details/72830938 .wxml <view class="sw

谁践踏了优雅/ 2022年06月01日 11:58/ 0 赞/ 484 阅读

相关纯JS实现左右滑动布局和滑动

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta nam

墨蓝/ 2022年04月18日 04:26/ 0 赞/ 917 阅读

相关弹性布局

弹性布局在制作网页的过程中，布局是我们最重要的一个环节，可以说布局的好坏直接影响到整个网页的成败，布局成，则事半功倍，布局败，则事倍功半。随着移动互联的到来，响应式网站风

灰太狼/ 2021年11月02日 05:50/ 0 赞/ 477 阅读

相关常见布局—弹性布局

在常见的布局中，通常有一部分是固定高度，而其他部分是剩余大小分配的，这种情况我们可以使用弹性布局。说到弹性布局，就得介绍一下css属性中的弹性盒——display:flex

Myth丶恋晨/ 2021年09月18日 15:04/ 0 赞/ 542 阅读