如何用flex布局实现类似通讯录的效果??
发布于 6 年前 作者 fangzhang 13426 次浏览 来自 问答

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

<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…垂直排列,类似通讯录。在线等。。谢谢大神。

8 回复

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

<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循环写入则有问题。。。

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

手动写入的效果。。。

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

wx:for 要放在 letter-item 上啊!

<view class="sider-bar">

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

  </view>

你把wx:for放到letter-item

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

.sider-bar{

        display: flex;

flex-direction: column;

}

回到顶部