Live2d Test Env

假设小程序的个人中心页面,如果不登录就获取不到相关信息,而为了获取用户信息则又要单独新增一个页面,又有一些得不偿失,如果读者家的产品愿意的话,这时候读者就可以考虑下笔者这篇文章讲的内容
前提: 强烈推荐使用flex布局方式,float实在遭嫌

基本结构

<view class="con">
  <view class="box">
   <button class="btns" bindcontact='contact'    open-type='contact'></button>
    客服
 </view>
 <view class="box">
  <button class="btns" bindgetphonenumber='getPhoneNumber'    open-type='getPhoneNumber'></button>
  手机
</view>
<view class="box">
  <button class="btns" bindopensetting='getPhoneNumber'    open-type='openSetting'></button>
  授权
</view>
<view class="box">
  <button class="btns" bindgetuserinfo='bindgetuserinfo'    open-type='getUserInfo'></button>
  用户
</view>
</view>
  1. 给要授权的位置包裹一个class为box的view标签,这个标签需要有宽高,且必须是相对定位/固定定位;
.con{
   100%;
  height: 48px; 
  border: 1px solid blue;
  display: flex; 
}
.box{
  position: relative;
   100rpx;
  height: 48px;
  border: 1px solid red;
  line-height: 48px;
  text-align: center;
}
  1. 给内部的button按钮添加一个样式,重点在于需要给button绝对定位且必须宽高都是100%(这样的目的是为了防止溢出)且透明度必须为0
.btns{
 position: absolute;
 left: 0;
 top: 0;
  100%;
 height: 100%;
 opacity: 0;   
}

如果不放心,可以加个z-index ,这样可以确保被点击的是button本身

重要的的样式就是这样。

以上。

原文地址:https://www.cnblogs.com/hjk1124/p/14109821.html