关于hms-core:超简单实现自定义弹窗

38次阅读

共计 5424 个字符，预计需要花费 14 分钟才能阅读完成。

快利用 promt.showDialog 接口提供的弹框只能显示文字、按钮简略的元素，无奈实现简单的页面成果。但往往产品经理设计的弹框页面成果很炫，怎么办呢？

比方实现如下弹窗成果：展现一个列表，右边显示图片，左边显示具体介绍，见图 1；提醒用户查看利用隐衷协定弹窗成果，外面内容有超链接成果，能点击，见图 2：

 

图 1  列表弹窗                            图 2  超链接弹窗

此问题个别是开发者对快利用组件、款式属性应用不相熟导致的。

解决办法

基于 stack 组件 +position:fixed css 款式能够实现自定义弹窗，弹窗显示暗藏基于 if/show 指令来管制，具体代码如下：

初始化数据模型：

` data() {

  return {list: [1, 2, 3],
    isShow: false,
    ifShow1: false,
    ifShow2: false
  }
},`

页面布局：

`<text onclick=”showToast1″> 自定义弹窗款式 1 </text>

<text onclick="showToast2"> 自定义弹窗款式 2 </text>
<!-- 弹窗 -->
<div if="{{isShow}}" class="modal center-modal">
  <div class="toast-box password-box">
    <block>
      <stack class="eyes-input-box">
        <div style="flex-direction: column;width: 100%;" if="{{ifShow1}}">
          <div style="width: 100%;">
            <text style="font-size: 32px;font-weight: 500;"> 交通守法 </text>
            <text style="font-size: 25px;text-align: right;padding-left: 400px" onclick="hide"> 暗藏 </text>
          </div>
          <list style="height: 550px">
            <list-item type="list" for="list" style="height: 160px;margin-top: 20px">
              <div style="padding-top: 1px;">
                <image src="/Common/icon.png" style="border-radius: 100%;width: 100px;height: 100px;"></image>
                <div style="flex-direction: column; margin-left: 20px">
                  <text style="font-size: 28px;font-weight: 600;"> 二级题目 </text>
                  <text style="font-size: 26px;margin-top: 10px"> 相干内容展现，例如商品属性、价格、上架日期等信息展现 </text>
                  <div style="height: 2px;background-color:#808080;bottom: 0;margin-top: 25px" if="{{$idx<2}}">
                </div>
                </div>
                
              </div>
            </list-item>
          </list>
        </div>
        <div style="flex-direction: column;width: 100%;" if="{{ifShow2}}">
          <text style="font-size: 31px;font-weight: 700;"> 城市服务 </text>
          <text style="font-weight: 400;"><span> 点击“批准”，即示意您批准上述内容及 </span><a style="color: #0000ff;" onclick="toast"> 利用名称的用户协定 </a>
            <span>、</span><a style="color: #0000ff;" onclick="toast"> 对于利用名称与隐衷的申明 </a></text>
          <div style="width: 100%;">
          <text style="width: 50%; text-align: center; color: #0000ff;" onclick="hide"> 确认 </text>
          <text style="width: 50%; text-align: center; color: #0000ff;" onclick="hide"> 勾销 </text>
          </div>
        </div>
      </stack>
    </block>
  </div>
</div>`

页面款式：
`
.container {

flex-direction: column;
justify-content: center;
align-items: center;
.body {
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    .img {margin-top: 500px;}
    .txt {margin-top: 570px;}
}

// 弹窗款式

.modal {

position: fixed;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;
padding: 0 34px 34px;
background-color: rgba(0, 0, 0, 0.18);
animation-name: Modal;
animation-duration: 130ms;
animation-timing-function: ease-in;
.toast-box {
  width: 100%;
  padding: 25px 50px 20.8px;
  border-radius: 34px;
  background-color: white;
  flex-direction: column;
  .toast-title {
    font-size: 41.6px;
    line-height: 56px;
    font-weight: 500;
    font-family: HWtext-65ST;
    color: #000000;
  }
  .toast-tip {
    font-family: HWtext-55ST;
    font-size: 29px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 40px;
    margin-top: 3.6px;
    margin-bottom: 25px;
  }
  .label-box {
    height: 100px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .label {
      color: #000000;
      width: 100%;
      font-family: HWtext-55ST;
      font-size: 34px;
    }
    input {margin-right: -11px;}
  }
  .manage {
    height: 100px;
    font-family: HWtext-65ST;
    font-size: 29.12px;
    color: #007dff;
    font-weight: 500;
  }
  .cancel {
    width: 100%;
    height: 75px;
    margin-top: 37.44px;
    text-align: center;
    font-family: HWtext-65ST;
    font-size: 33.28px;
    color: #007dff;
    font-weight: 500;
  }
  .btn-box {
    justify-content: space-between;
    align-items: center;
    .bind {
      width: 47%;
      height: 60px;
      border-radius: 10px;
      font-family: HWtext-65ST;
      text-align: center;
      font-size: 33.28px;
      color: #007dff;
      margin: 16px 0;
      font-weight: 500;
    }
    .line {
      height: 50px;
      width: 1px;
      background-color: rgba(0, 0, 0, 0.2);
    }
    .quit {
      width: 47%;
      height: 60px;
      border-radius: 10px;
      text-align: center;
      font-family: HWtext-65ST;
      font-size: 33.28px;
      color: #007dff;
      margin: 16px 0;
      font-weight: 500;
    }
    .bind:active {background-color: rgba(0, 0, 0, 0.1); // 待高保真批改
    }
    .quit:active {background-color: rgba(0, 0, 0, 0.1); // 待高保真批改
    }
  }
  .nocar-tip {
    height: 99.84px;
    font-size: 33.28px;
    font-family: HWtext-55ST;
    color: #000000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}
.password-box {
  margin-top: -110px;
  padding: 30.63px 50px 20.8px;
  .toast-title {
    height: 55.64px;
    margin-bottom: 30.12px;
  }
  .password-tip {
    flex-direction: column;
    margin-top: 3.6px;
    margin-bottom: 25px;
    .control-tip {
      font-family: HWtext-55ST;
      font-size: 24.96px;
      color: rgba(0, 0, 0, 0.6);
    }
  }
  .error-password-tip {
    font-family: HWtext-55ST;
    font-size: 24.96px;
    color: #fa2a2d;
    height: 32.76px;
    margin-bottom: 37.4px;
    margin-top: 0;
  }
  .btn-box {
    .bind {
      margin-top: 8px;
      margin-bottom: 8px;
    }
    .quit {
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }

  .eyes-input-box {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    .input-password {
      width: 100%;
      height: 94.64px;
      border: 1px solid #ffffff;
      border-bottom-color: #000000;
      padding: 11.44px 0;
      margin-bottom: 20.8px;
    }
    .password-text {
      width: 100%;
      height: 94.64px;
      padding: 11.44px 0;
      border-bottom: 1px solid #000000;
      margin-bottom: 20.8px;
      color: #000000;
      font-size: 36px;
    }
    .eyes-img {
      width: 49.92px;
      height: 49.92px;
      margin-top: 23px;
    }
  }

  .password-loading-box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 150px;
    .loading-text {
      font-family: HWtext-55ST;
      font-size: 33.28px;
      color: rgba(0, 0, 0, 0.96);
    }
    .loading-circular {
      width: 102px;
      height: 102px;
      color: #666666;
    }
  }
}

}
}
`

事件绑定：

`
showToast1() {

  this.isShow = true;
  this.ifShow1 = true
  this.ifShow2 = false
},
showToast2() {
  this.isShow = true;
  this.ifShow1 = false
  this.ifShow2 = true
},
hide(){this.isShow = false;},
toast() {
  prompt.showToast({message: '查看隐衷协定'})

}
`

欲了解更多详情，请参阅：

快利用开发领导文档：https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper

快利用 Style 款式：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style

快利用通用款式：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-common-settings#h1-1575449213432

原文链接：https://developer.huawei.com/…

原作者：Mayism

正文完
hms-core
发表至： hms-core
2021-04-02
 0
关于hms-core:华为分析520重磅上线四大亮点让数据洞察更深入
关于hms-core:开发者必看2020年移动应用趋势洞察白皮书
关于hms-core:不能登录Google账号
关于hms-core:浅析HMS-Core开放能力在HarmonyOS中的应用