zoukankan      html  css  js  c++  java
  • 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本身

    重要的的样式就是这样。

    以上。

  • 相关阅读:
    第二阶段站立会议第十天
    第二阶段站立会议第九天
    第二阶段站立会议第八天
    第二阶段站立会议第七天
    第二阶段站立会议第六天
    第二阶段站立会议第五天
    第二阶段站立会议第四天
    第二冲刺阶段个人进度10
    第二冲刺阶段个人进度09
    第二冲刺阶段个人进度08
  • 原文地址:https://www.cnblogs.com/hjk1124/p/14109821.html
Copyright © 2011-2022 走看看