如何正确的姿势填写水平滚动 布局
发布于 5 年前 作者 wanjing 3510 次浏览 来自 问答

我遇到了太多问题了

比如 水平 使用flex权重平分的时候我发现不能直接控制scroll-view

这个问题搞定了,以前也搞定了的,搞来搞去 又变成搞不定了

因为安卓被挤成一坨的问题依然没人回答,所以我就又改,结果改的现在都无法滚动了到底应该用搞呢?

<template name=“tags”>

  <scroll-view scroll-y="{{true}}" class=“mmtag”>

      <navigator wx:for="{{tags}}" wx:key=“id” wx:for-index=“index” wx:for-item=“item” url=“省略” class=“list-tags-link”>

省略

      </navigator>

 

  </scroll-view>

</template>

.mmtag {

  width: 100%;

    white-space: nowrap;

}

.mmtag  .list-tags-link {

 display: inline-block;

 width: 30px;

  box-sizing: content-box;

  flex-direction: column;

  padding-right: 10rpx;

  padding-left: 10rpx;

  align-items: center;

  justify-content: center;

}

.mmtag   .list-tags-link .list-tags-img {

  height: 40px;

  width: 40px;

  border-radius: 50%;

}

其实我之前是用flex的,我把权重删除了发现还是没法滚动了 ,

5 回复

scroll-x =true or scroll-x={{true }} or scroll-x=“true”  or  scroll-x=‘true’ 布局界面看不到true or false

我不想说什么了,我发现没有解决,现在怎么改都可以滚动了,崩溃中。

但是我上次发的链接挤成一坨的毛病在安卓上没有了, 头大啊。。

问题解决 用这种结构可以解决 只能设置min-width问题否则层叠问题

.mmtag {

  padding-bottom: 8rpx;

  padding-top: 5rpx;

  width: 100%;

}

.mmtag view {

  width: 100%;

  display: flex;

flex-direction: row;

}

其中.mmtag是给scrollview设置的

我由于被微信小程序的历史版本坑的很惨搞的我不知道到底哪个设置最有效,特别是轮播图控件

现在发现 scroll-x是可以使用{{true}} or “true”

…bug好可怕

又改了一把 还是无法水平滚动

mmtag {

  width: 100%;

    white-space: nowrap;

}

.mmtag view{

  display: inline-flex;

}

 .list-tags-link {

 display: flex;

flex-direction: column;

  box-sizing: content-box;   padding-right: 10rpx;

  padding-left: 10rpx;

  align-items: center;

  justify-content: center;

}

这次我scorllview里面加了view,

回到顶部