【微信小程序】布局

单页面高度100% 

Page {
    height: 100%;
    background:white;
}

内联元素下方有一段空白区域

<image class="inline" src="/image/carousel.png"></image>

.inline {
    display: flex;
    flex-direction: column;   
}

内联元素设置line-height失效

<text class="inline">这是文字</text>

.inline {
    display:inline-block;
    height:80rpx;
    line-height:80rpx; 
}

设置box-shadow阴影在真机上无效

<view class="box-shadow"></view>

.box-shadow {
    height: 50px;
    width: 50px;
    box-shadow: 0rpx 10rpx 50rpx 10rpx rgba(85, 85, 85, 0.10);
}

标签文字自动换行

view,
cover-view {
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-line;
}

单行文本溢出部分省略号...显示无效

display: block;

text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowwrap;
}

组织结构

1. 顶部页头

<scroll-view>让文字过多的时候横向滚动，记住要设置class="text"成white-space：nowrap 这样保证在同一行。

<scroll-view  scroll-x="{{true}}" class="text">
  <text class="crumb" 
    wx:for-items="{{title}}" 
    wx:key='index' 
    data-item="{{item}}" 
    data-index="{{index}}" 
    bindtap="changeCrumb"
  >
    {{item.name}} 

    <!-- 最后一项没有箭头 -->
    <text class="arrow" wx:if="{{title.length -1 != index}}"> > </text>
  </text>
</scroll-view>

title:[
  {name:'首页'},
],

2.底部列表页展示

展示的页面展示名称和手机，但不是每一页都展示手机，所以给手机号和图片添加判断条件wx:if="{{item.phone}}"。使用 show: false 是为了阻止拨打电话确定或取消后触发onShow。同时在onShow中要对设置默认展示的列表 filter_list: this.data.list 。

<view  class="item" 
    wx:for-items="{{filter_list}}" 
    wx:key='index' 
    data-item="{{item}}" 
    bindtap="changeItem"
>
  {{item.name}} 

  <!-- 手机号 -->
  <text wx:if="{{item.phone}}">{{item.phone}}</text>

  <!-- 手机图片 -->
  <van-image 
    data-phone="{{item.phone}}"  
    catchtap="callPhone" 
    width="80rpx" 
    height="40rpx" 
    src="https://xxxxx/phone.svg" 
    wx:if="{{item.phone}}"
  ></van-image>
</view>

list:[
  {
    name:'哈哈哈哈哈1',
    level: 0,
    children:[
      {
        name: '嘻嘻嘻嘻嘻嘻1',
        level: 1,
        children:[
          {
            name: '嘤嘤嘤嘤嘤嘤1',
            level: 1,
            phone:'15952011111'
          },
          {
            name: '嘤嘤嘤嘤嘤嘤2',
            level: 2,
          }
        ]
      },
      {
        name: '嘻嘻嘻嘻嘻嘻1',
        level: 1,
        children:[
          {
            name: '嘤嘤嘤嘤嘤嘤3',
            level: 2,
          },
          {
            name: '嘤嘤嘤嘤嘤嘤4',
            level: 2,
          }
        ]
      }
    ]
  }
],

// 筛选出来的
filter_list:[],

// 阻止刷新onShow
show: true,

​onShow() {
  if(this.data.show == true) {
    this.setData({
      filter_list: this.data.list
    })
  }
}

​

callPhone(e) {
  // 阻止onShow
  this.setData({
    show: false
  })

  // 拨打电话
  if(phone) {
    wx.makePhoneCall({
      phoneNumber: e.currentTarget.dataset.phone
    })
  }
},

3.点击面包屑

获取当前点击的下标index去整个结构遍历，找出符合level == index的下标，然后将顶部面包屑中此下标后面的值清空，将当前层级的list同时也赋值给filter_list。

changeCrumb(e) {
  let index = e.currentTarget.dataset.index
  this.dg(this.data.list, index)
},

dg(list,index) {
  
  list.some((v,k)=>{
    if(v.level == index) {
      
      // 删除当前下标后的所有值
      this.data.title.splice(index + 1, this.data.title.length - 1)
      
      this.setData({
        filter_list: list,
        title: this.data.title,
      })
      return true
    }

    if(v.children && v.children.length > 0) {
      this.dg(v.children,index)
    }
  })
},

4.点击底部列表页

当前的level比顶部的下标少1，所以加上1之后生成的index可以定位顶部。

获取点击的项目和下标。将当前的name添加到顶部，将当前项目的children赋值给筛选列表filter_list.

changeItem(e) {
  let item = e.currentTarget.dataset.item
  let index = item.level + 1
  let data = 'title['+index+'].name'
  if(item.children && item.children.length > 0) {
    this.setData({
      [data]: item.name,
      filter_list: item.children
    })
  }
},

实现效果

<scroll-view  scroll-x="{{true}}" class="text">
  <text class="crumb" wx:for-items="{{title}}" wx:key='index' data-item="{{item}}" data-index="{{index}}" bindtap="changeCrumb">{{item.name}} <text class="arrow" wx:if="{{title.length -1 != index}}"> > </text></text>
</scroll-view>

<view wx:for-items="{{filter_list}}" wx:key='index' class="item" data-item="{{item}}" bindtap="changeItem">
  {{item.name}} 
  <text wx:if="{{item.phone}}">{{item.phone}}</text>
  <van-image data-phone="{{item.phone}}"  catchtap="callPhone" style="z-index:999; position: absolute;" class="ml" width="80rpx" height="40rpx" src="https://mini.yunfangkj.com/datas/fileStore/phone.svg" wx:if="{{item.phone}}"></van-image>
</view>

list:[
  {
    name:'哈哈哈哈哈1',
    level: 0,
    children:[
      {
        name: '嘻嘻嘻嘻嘻嘻1',
        level: 1,
        children:[
          {
            name: '嘤嘤嘤嘤嘤嘤1',
            level: 1,
            phone:'15952011111'
          },
          {
            name: '嘤嘤嘤嘤嘤嘤2',
            level: 2,
          }
        ]
      },
      {
        name: '嘻嘻嘻嘻嘻嘻1',
        level: 1,
        children:[
          {
            name: '嘤嘤嘤嘤嘤嘤3',
            level: 2,
          },
          {
            name: '嘤嘤嘤嘤嘤嘤4',
            level: 2,
          }
        ]
      }
    ]
  }
],

// 筛选出来的
filter_list:[],

// 顶部
title:[
  {name:'首页'},
],

// 阻止刷新onShow
show: true,

onShow() {
  if(this.data.show == true) {
    this.setData({
      filter_list: this.data.list
    })
  }
}

changeCrumb(e) {
  let index = e.currentTarget.dataset.index
  this.dg(this.data.list, index)
},

dg(list,index) {
  
  list.some((v,k)=>{
    if(v.level == index) {
      
      // 删除当前下标后的所有值
      this.data.title.splice(index + 1, this.data.title.length - 1)
      
      this.setData({
        filter_list: list,
        title: this.data.title,
      })
      return true
    }

    if(v.children && v.children.length > 0) {
      this.dg(v.children,index)
    }
  })
},


changeItem(e) {
  let item = e.currentTarget.dataset.item
  let index = item.level + 1
  let data = 'title['+index+'].name'
  if(item.children && item.children.length > 0) {
    this.setData({
      [data]: item.name,
      filter_list: item.children
    })
  }
},


callPhone(e) {
  // 阻止onShow
  this.setData({
    show: false
  })

  // 拨打电话
  if(phone) {
    wx.makePhoneCall({
      phoneNumber: e.currentTarget.dataset.phone
    })
  }
},