——————————————布局文件——————————————
<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…垂直排列,类似通讯录。在线等。。谢谢大神。
问题出在这,假如手动写字母就没有问题。。
<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循环写入则有问题。。。