微信小程序实现点击一块区域，出现一块区域按钮。

这个组件可以实现
引用别人的组件，上面github可以很好的实现气泡弹窗效果

  <view style="margin-top: 200rpx;" class="hello">
    <view>	
      <!-- 以下style样式均为实现动画效果 -->
      <view bindtap="show" class="timePicker" style="position:relative" >
        第一列
      </view>
      <!-- style 其中40*4 40为列表格的固定高度，单位为px，4为列表格数量 -->
      <view class="box" style="height:{{show?40*4:'0'}}px; position: absolute; ">
        <!-- 展示行 -->
          <view class="box-in" bindtap="he">编辑</view>
          <view class="box-in">删除</view>
          <view class="box-in">详情</view>
      </view>

    </view>
    <view>hello你认为呢</view>

  </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

show:function(){
//如果show值为true，则更改为false 反之设置true
if(this.data.show){
this.setData({
show:false
})
}else{
this.setData({
show:true
})
}
},

he(){
console.log(“sadasdd”)
this.setData({
show:!this.show
})
wx.navigateTo({
url: ‘/pages/test1/index’,
})
},

<view style="margin-top: 200rpx;" class="hello">
    <view>
      <!-- 以下style样式均为实现动画效果 -->
      <view bindtap="show" class="timePicker" style="position:relative">
        第一列
      </view>
      <!-- style 其中40*4 40为列表格的固定高度，单位为px，4为列表格数量 -->


    </view>
    <view style="position: relative;">
      <view class="sanjiaoxing" wx:if="{{show}}" style="position: absolute; left: 60rpx;"></view>
      <view class="box" style="height:{{show?40*4:'0'}}px; position: absolute;top: 20rpx; border-radius: 10rpx;">
        <view class="box-in" bindtap="he">编辑</view>
        <view class="box-in">删除</view>
        <view class="box-in">详情</view>
      </view>


    </view>


    <view>hello你认为呢</view>

  </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.sanjiaoxing{
      /*宽高为0*/
      width: 0;
      height: 0;
      /*在三角形底边设置一个边界颜色/
      border-top: 20px solid red;
      /*其它3边设置相同颜色，*/
      border-left:10px solid transparent;
			border-right:10px solid transparent;
      border-bottom:10px solid #fff;
}
1
2
3
4
5
6
7
8
9
10
11

样式有点丑，要继续优化，可以引用对应的气泡类型的组件，可以更好的实现效果。

优化：

<!--components/tabchange/index.wxml-->
<view style="margin-top: 400rpx;" class="hello">
      <view style="position: relative;">
      <!-- 以下style样式均为实现动画效果 -->
      <view style="">
        <view class="bubble" style="position: absolute; top: -320rpx;" wx:if="{{show}}">
          <view class="box-in" bindtap="he">盘点</view>
          <view class="box-in" bindtap="del">盘点记录</view>
          <view class="box-in">含水量</view>
          <view class="box-in">含水量记录</view>
        </view>
        <view bindtap="show" style="position: absolute; width: 130rpx;text-align: center;">
          <!-- 图标 -->
          <van-icon name="more-o" size="20" />
        </view>
        <!-- 站行 -->
        <view style="width: 100%;height: 40rpx;"></view>
      </view>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.bubble{
  width:190rpx;
  height:290rpx;
  background:#fff;
  border:1rpx solid #ddd;
  border-radius: 14rpx;
}

.bubble::after{
  content: '';
  position: absolute;
  left:50rpx;
  bottom:-32rpx;
  z-index: 2;
  width: 0;
  height: 0;
  border: 18rpx solid;
  border-color: rgb(211, 207, 207) transparent  transparent  transparent ;
}

.box{
  width:30%;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 15rpx black
}
.box-in{
  display: flex;
  align-items: center;
  height:70rpx;
  padding-left: 10rpx;
  border-bottom: #E5E5E5 1rpx solid;
  z-index: 99;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

{
  "component": true,
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index"
  }
}
1
2
3
4
5
6

// components/common/son-home-info-template/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //是否是仓库管理
    isBinManage: {
      type: Boolean,
      value: false
    },
    dataItem: {},
    navTitle: {
      type: String,
      value: ""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
     show:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    he(){
      this.setData({
        show:!this.data.show
      })
      wx.showToast({
        title: '点击了盘点',
        icon:'none'
      })
    },
    show:function(){
      //如果show值为true，则更改为false  反之设置true
      if(this.data.show){
        this.setData({
          show:false
        })
      }else{
        this.setData({
          show:true
        })
      }
    },
  },
  lifetimes: {
    ready() {
      this.setData({
        dataItem: this.properties.dataItem
      })
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59