收藏
回答

如何用flex布局实现类似通讯录的效果??

问题模块
API和组件

——————————————布局文件——————————————

<view class="container">


  <view class="content">

    content

  </view>


  <view class="sider-bar" wx:for="{{letterArray}}" wx:key="id">

    <view class="letter-item">{{item}}</view>

  </view>


</view> ———————————————css:———————————————————————————

.container {

  width: 100%;

  background-color: gray;

  display: flex;

}

.content {

  height: 600rpx;

  background-color: yellow;

  flex: 1;

}

.sider-bar {

  width: 100rpx;

  background-color: forestgreen;

  font-size: 20px;

  text-align: center;

}

————————————————————————————————————————————

但是实际i这个效果是这样的。。。期望效果,右边的是顶宽,ABCD..垂直排列,类似通讯录。 在线等。。谢谢大神。

最后一次编辑于  2017-07-06  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

8 个回答

  • wxu(旭良倒纱行)
    wxu(旭良倒纱行)
    2017-07-06

    .sider-bar{

            display: flex;

    flex-direction: column;

    }

    2017-07-06
    赞同
    回复
  • Mars
    Mars
    2017-07-06

    @wxu 这个试过了,不起作用

    2017-07-06
    赞同
    回复
  • Mars
    Mars
    2017-07-06

    问题出在这,假如手动写字母就没有问题。。

    <view class="sider-bar"  >

        <text>A</text>

        <text>B</text>

        <text>C</text>

        <text>D</text>

        <text>E</text>

        <text>F</text>

        <text>G</text>

        

      </view> 而wx:for循环写入则有问题。。。


    2017-07-06
    赞同
    回复
  • maq
    maq
    2017-07-06
    wx:for 要放在 letter-item 上啊!
    2017-07-06
    赞同
    回复
  • Mars
    Mars
    2017-07-06

    手动写入的效果。。。

    2017-07-06
    赞同
    回复
  • Mars
    Mars
    2017-07-06

    确实。。。哈哈,写在item上正确,谢谢。

    2017-07-06
    赞同
    回复
  • wxu(旭良倒纱行)
    wxu(旭良倒纱行)
    2017-07-06

    <view class="sider-bar">

        <view class="letter-item" wx:for="{{letterArray}}" wx:key="id">{{item}}</view>

      </view>

    你把wx:for放到letter-item

    2017-07-06
    赞同
    回复
  • 侯才华
    侯才华
    2017-07-06

    参考下程序及时会电话会议,有通讯录这个功能

    2017-07-06
    赞同
    回复