小程序热区

[hsipeng]

与传统是实现方式比较

html 中可以用 <map> 和 <area>实现简单效果，

小程序中主要有两种

• 规则的热区可以用 <navigator> 实现

<view class='hot-area'>
    <view class='hotArea-img'>
    <image src='xxxx.png' style='height:100%; weight:100%;'></image>
  </view>
  <view class='hotArea-mask'>
    <navigator url='/pages/hotarea/1/1'>
      <view class='hotArea-1'>1</view>
    </navigator>
    <navigator url='/pages/hotarea/2/2'>
      <view class='hotArea-2'>2</view>
    </navigator>
    <navigator url='/pages/hotarea/3/3'>
      <view class='hotArea-3'>3</view>
    </navigator>
    <navigator url='/pages/hotarea/4/4'>
      <view class='hotArea-4'>4</view>
    </navigator>
  </view>
  </view>

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
} 


.hotArea-img{
  width: 700rpx;
  height: 200rpx;
}

.hotArea-mask{
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  background-color: #000;
  opacity: 0.4;
}

.hotArea-mask view {
  flex: 1;
  height:200rpx;
  width:160rpx;
}

.hotArea-1{
  background-color: blue;
}

.hotArea-2{
  background-color: yellow;
}

.hotArea-3{
  background-color: red;
}

.hotArea-4{
  background-color: orange;
}

.container .hot-area{
  flex:1;
  flex-direction:column;
  margin-bottom: 40rpx;
  height: 200rpx;
  position:relative;
}

当然你还可以封装一些基础组件

• 不规则的要通过 canvas 实现