1.wxml
<view class="container">
<view class='newHouseTitle'>
当前位置
</view>
<view class="map_wrap">
<map id="map" longitude="{
{t_lng}}" latitude="{
{t_lat}}" scale="15" markers="{
{markers}}" class="map_map" bindtap="show_big_map"></map>
<view class="xmwzB flex tfAlignC flexSb">
<view class="xmwzBLi {
{index==xmwzB_index?'on':''}}" data-index='{
{index}}' catchtap="xmwzB_click" wx:for='{
{tabs}}' wx:key='index'>
<image class="img" src="{
{index!=xmwzB_index?item.ico:item.ico_active}}"></image>
{
{item.name}}
</view>
</view>
<view class="xmwzUl" wx:if='{
{arrlist_cur&&arrlist_cur.length}}'>
<view class="xmwzUl-li flex flexSb tfAlignC" wx:for='{
{arrlist_cur}}' wx:key='index'>
<view class="xmwzUl-li-name tfLine1" style="max-width:500rpx;">{
{item.title}}</view>
<view class="xmwzUl-li-add">{
{item.distance}}m</view>
</view>
</view>
</view>
</view>
2.css
/*弹性布局*/
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: box;
flex-wrap:wrap;
}
.noWarp{
flex-wrap:nowrap;
}
/*元素居中*/
.alignC{
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
}
/*水平排列*/
.flexH{
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
/*垂直排列*/
.flexV {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
/*两端对齐*/
.flexSa {
-webkit-box-pack: justify;
justify-content: space-around;