uni-app弹窗多选样式分享

分享一个uniapp弹层多选样式

*弹层依赖uniapp-popup组件

页面参考代码：

<uni-popup :show="show" type="bottom" :custom="true" :mask-click="false">
  <view class="pop">
    <view class="btns">
      <view class="pop-button cancel" @click="cancel()">取消</view>
      <view class="pop-button sure" @click="sure()">确定</view>
    </view>
    <view class="pop-content">
      <view class="content">
        <scroll-view scroll-y class="left-aside">
          <view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item)">
            {{ item.name }}
          </view>
        </scroll-view>
        <scroll-view scroll-with-animation scroll-y class="right-aside" :scroll-top="tabScrollTop">
          <view v-for="item in slist" :key="item.id" class="s-list" :id="'main-' + item.id">
            <view class="s-item">
              <m-icon class="icon" type="double-left-angle" color="#F1F1F1" size="8"></m-icon>
              {{ item.name }}
              <m-icon class="icon" type="double-right-angle" color="#F1F1F1" size="8"></m-icon>
            </view>
            <view class="t-list">
              <view
                :class="{ active: vSelect.indexOf(titem.id) != -1 }"
                @click="tapInfo(titem.id)"
                class="t-item"
                v-for="titem in item.child"
                :key="titem.id"
              >
                <text>{{ titem.name }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</uni-popup>

script

import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
  components: {
		uniPopup
	},
  data() {
		return {
      flist: [
        {
          id: 1,
          name: '鱼类'
        },
        {
          id: 2,
          name: '虾类'
        },
        {
          id: 3,
          name: '贝类'
        },
        {
          id: 4,
          name: '其他'
        }
      ],
      slist: [
        {
          id: 5,
          pid: 1,
          name: '海水类',
          child: [
            {
              id: 8,
              name: '美国红鱼'
            },
            {
              id: 9,
              name: '卵形鲳鲹'
            },
            {
              id: 10,
              name: '大黄鱼'
            },
            {
              id: 11,
              name: '鲆蝶类'
            },
            {
              id: 12,
              name: '石斑鱼'
            }
          ]
        },
        {
          id: 6,
          pid: 1,
          name: '淡水类',
          child: [
            {
              id: 14,
              name: '鲌鱼'
            },
            {
              id: 15,
              name: '淡水白鲳'
            },
            {
              id: 16,
              name: '白斑狗鱼'
            },
            {
              id: 17,
              name: '鲮鱼'
            },
            {
              id: 18,
              name: '罗汉鱼'
            },
            {
              id: 19,
              name: '鲶'
            },
            {
              id: 20,
              name: '草鱼'
            },
            {
              id: 21,
              name: '团头鲂'
            },
            {
              id: 22,
              name: '罗非鱼'
            },
            {
              id: 23,
              name: '斑点叉尾鮰'
            },
            {
              id: 24,
              name: '虹鳟'
            },
            {
              id: 25,
              name: '加州鲈'
            },
            {
              id: 26,
              name: '黄颡鱼'
            },
            {
              id: 27,
              name: '鳗鲡'
            },
            {
              id: 28,
              name: '锦鲤'
            },
            {
              id: 29,
              name: '鲫鱼'
            },
            {
              id: 30,
              name: '鳜鱼'
            },
            {
              id: 31,
              name: '黄鳝'
            },
            {
              id: 32,
              name: '泥鳅'
            }
          ]
        }
      ],
      slistTmp: [
        {
          id: 5,
          pid: 1,
          name: '海水类',
          child: [
            {
              id: 8,
              name: '美国红鱼'
            },
            {
              id: 9,
              name: '卵形鲳鲹'
            },
            {
              id: 10,
              name: '大黄鱼'
            },
            {
              id: 11,
              name: '鲆蝶类'
            },
            {
              id: 12,
              name: '石斑鱼'
            }
          ]
        },
        {
          id: 6,
          pid: 1,
          name: '淡水类',
          child: [
            {
              id: 14,
              name: '鲌鱼'
            },
            {
              id: 15,
              name: '淡水白鲳'
            },
            {
              id: 16,
              name: '白斑狗鱼'
            }
          ]
        },
        {
          id: 52,
          pid: 2,
          name: '海水类',
          child: [
            {
              id: 82,
              name: '虾1'
            },
            {
              id: 92,
              name: '虾2'
            },
            {
              id: 102,
              name: '虾3'
            },
            {
              id: 112,
              name: '虾4'
            },
            {
              id: 122,
              name: '虾5'
            }
          ]
        },
        {
          id: 62,
          pid: 2,
          name: '淡水类',
          child: [
            {
              id: 14,
              name: '虾6'
            },
            {
              id: 15,
              name: '虾7'
            },
            {
              id: 16,
              name: '虾8'
            }
          ]
        },
        {
          id: 623,
          pid: 3,
          name: '海水类',
          child: [
            {
              id: 14,
              name: '贝1'
            },
            {
              id: 15,
              name: '贝2'
            }
          ]
        },
        {
          id: 624,
          pid: 4,
          name: '海水类',
          child: [
            {
              id: 14,
              name: '其它'
            }
          ]
        }
      ]
    }
  }
},
methods: {
  tabtap(item) {
    if (!this.sizeCalcState) {
      this.calcSize();
    }
    this.currentId = item.id;
    let list = [];
    this.slistTmp.map(sitem => {
      if (sitem.pid === item.id) {
        list.push(sitem);
      }
    });
    this.slist = list;
  },
  //计算右侧栏每个tab的高度等信息
  calcSize() {
    let h = 0;
    this.slist.forEach(item => {
      let view = uni.createSelectorQuery().select('#main-' + item.id);
      view.fields(
        {
          size: true
        },
        data => {
          item.top = h;
          h += data.height;
          item.bottom = h;
        }
      ).exec();
    });
    this.sizeCalcState = true;
  },
  tapInfo(e) {
    if (this.vSelect.indexOf(e) == -1) {
      this.vSelect.push(e);
    }
  }
}

style

.pop {
  background: #fff;
  .btns {
    display: flex;
    justify-content: space-between;
    padding-top: 4upx;
    .pop-button {
      padding: 3px 5px;
    }
  }
  .item-box {
    padding: 10px;
    .item {
      display: inline-block;
      border: 1px solid #1550b5;
      color: #1550b5;
      border-radius: 12px;
      padding: 2px 10px;
      margin-right: 10px;
      &.cur {
        color: #fff;
        border: 1px solid #1550b5;
        background-color: #1550b5;
      }
    }
  }
  .pop-content {
    height: 100%;
    background-color: #fafafa;
    display: flex;
    height: 800upx;
    margin: 0 -20upx;
    .content {
      display: flex;
    }

    .left-aside {
      flex-shrink: 0;
      width: 240upx;
      height: 100%;
      background-color: #f7f7f7;
    }
    .f-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100upx;
      font-size: 28upx;
      color: #757575;
      position: relative;
      &.active {
        color: #1550b5;
        background: #f7f7f7;
        font-size: 36upx;
        font-weight: bold;
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 34upx;
          width: 8upx;
          background-color: #1550b5;
          border-radius: 0 4upx 4upx 0;
        }
      }
    }

    .right-aside {
      flex: 1;
      overflow: hidden;
      padding: 16upx 32upx 0 20upx;
      /deep/ .uni-scroll-view {
        height: 450px;
        overflow-y: auto;
      }
    }
    .s-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 70upx;
      padding-top: 8upx;
      font-size: 28upx;
      color: #757575;
      background: #fff;
      .icon {
        margin: 0 16upx;
        transform: scale(0.5);
      }
    }
    .t-list {
      display: flex;
      flex-wrap: wrap;
      background: #fff;
      padding: 12upx 6upx 0 6upx;
      margin-bottom: 24upx;
      &:after {
        content: '';
        flex: 99;
        height: 0;
      }
      .t-item {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        min-width: 200upx;
        font-size: 28upx;
        color: #666;
        margin: 0 10upx 40upx 10upx;
        &.active {
          color: #fff;
          background-color: #1550b5;
          border-radius: 24upx;
        }
      }
    }
  }
}

示例效果