Heim > WeChat-Applet > Mini-Programmentwicklung > Benutzerdefiniertes Nachrichtenfeld für Miniprogramme

Benutzerdefiniertes Nachrichtenfeld für Miniprogramme

巴扎黑
Freigeben: 2017-08-08 10:51:34
Original
2347 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zum benutzerdefinierten Nachrichtenaufforderungsfeld des WeChat-Applets, dem Schnittstellenaufruf wx.showToast (OBJECT), vorgestellt. Um die geänderte Funktion zu implementieren, können sich bedürftige Freunde auf

WeChat beziehen Miniprogramm-Eingabeaufforderungsfeld für benutzerdefinierte Nachrichten

Anforderungsbeschreibung:

wx.showToast(OBJECT)-Schnittstellenaufruf, aber Symbol und Bild sind nicht erforderlich. Auch wenn das Bild leer ist, gibt es einen Platzhalter. Tatsächlich möchte es nur benutzerdefinierten Textinhalt ausgeben.

Screenshot des Effekts:

Der Code lautet wie folgt:


<!--index.wxml-->
<!-- 页面正文 -->
<view>
 <block wx:for="{{50}}">
  <view> 123456 123456 123456 123456 123456</view>
 </block>
</view>
<!-- 自定义弹窗 -->
<view class="showModule" wx:if="{{isShow}}">
 <!-- 这部分内容可以灵活修改,例如改成一个模态框 -->
 <view class="text ">{{text}}</view>
</view>
Nach dem Login kopieren


/* index.wxss */

.showModule {
 /* 用样式控制隐藏 visibility: hidden;*//* flex 布局 */
 display: flex;
 justify-content: center;
 align-items: center;
 /* 生成绝对定位的元素,相对于浏览器窗口进行定位 */
 position: fixed;
 /* 如果 height,width 不变的情况下,left,top 不用修改 */
 left: 35%;
 top: 40%;
 height: 20vh;
 width: 30vw;
 /* 不透明 */
 opacity: 0.99;
 background-color: #7b7b7b;
 /* 圆角 */
 border-radius: 30rpx;
}

.showModule .text {
 /* flex 布局 */
 display: flex;
 /* 字体加粗 */
 font-weight: bold;
 color: white;
 font-size: 13pt;
 font-family: "微软雅黑";
 /* Helvetica,
   Arial,
   Hiragino Sans GB,
   Source Han Sans CN,
   PingFang SC,
   Roboto,
   微软雅黑,
   Heiti SC,
   Microsoft Yahei,
   sans-serif; */
}
Nach dem Login kopieren


//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  text: "弹窗内容",
  isShow: false
 },
 onShow() {
  this.setData({
   text: "用户取消支付",
   isShow: true
  })
 }
})
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBenutzerdefiniertes Nachrichtenfeld für Miniprogramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage