WeChat-Applet
Mini-Programmentwicklung
Beispiel für die Entwicklung eines WeChat-Applet-Simulations-Dropdown-Menüs
Beispiel für die Entwicklung eines WeChat-Applet-Simulations-Dropdown-Menüs
Mar 17, 2018 pm 12:16 PM
In diesem Artikel werden haupts?chlich Entwicklungsbeispiele für das Dropdown-Menü der WeChat-Applet-Simulation vorgestellt, in der Hoffnung, allen zu helfen.
1. Wissenspunkte
1.Dynamisches Anzeigen und Ausblenden eines bestimmten Steuerelements erreichen
data:{
open:false
},
showitem:function(){
this.setData({
open:!this.data.open
})
},.display_show{
display: block;
}
.display_none{
display: none;
} 2 . Parameter übergeben durch data-* und e.target.dateset
< view class="phone_personal">{{firstPerson}}
this.setData({
firstPerson:e.target.dataset.me,
})Zu diesem Zeitpunkt: firstPerson=eat
3.Flexible Boxw?rter: display:flex;
<view class="phone_one" bindtap="clickPerson">
<view class="phone_personal">{{firstPerson}}</view>
<image src="../../image/i.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image>
</view>im übergeordneten Element:
display:flex;
justify-content:space- between;
Auf diese Weise werden die Teilmengen gegenübergestellt. justify-content:space-between; Auf diese Weise befinden sich die Teilmengen an beiden Enden
2. Ereignisliste
(1). Dropdown-Liste
1.wxml
<view class="page">
<view class="page_bd">
<view class="body_head" bindtap="showitem">點擊我顯示下拉列表</view>
<navigator url="pages/list/list">
<view class="{{open?'display_show':'display_none'}}">列表1</view>
</navigator>
<navigator url="pages/scroll-view/index">
<view class="{{open?'display_show':'display_none'}}">列表2</view>
</navigator>
<navigator url="pages/scroll-view/index">
<view class="{{open?'display_show':'display_none'}}">列表3</view>
</navigator>
</view>
</view>2.wxss
.page_bd{
padding: 10px;
background-color: snow;
}
.body_head{
border: 1px solid;
border-color: beige;
padding: 10px;
}
.display_show{
display: block;
border: 1px solid;
border-color: beige;
padding: 10px;
}
.display_none{
display: none;
}
3.js
Page({
data:{
open:false
},
showitem:function(){
this.setData({
open:!this.data.open
})
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})
(2 ). Dropdown-Menü
1.wxml
<view class="phone_one" bindtap="clickPerson">
<view class="phone_personal">{{firstPerson}}</view>
<image src="../../image/i.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image>
</view>
吃
喝
玩
2.wxss
phone_personal{
width: 100%;
color:rgb(34, 154, 181);
height:100rpx;
line-height:100rpx;
text-align: center;
}
.phone_one{
display:flex;
position:relative;
justify-content:space-between;
background-color:rgb(239, 239, 239);
width:90%;
height:100rpx;
margin:22px auto;
border-radius:10rpx;
border-bottom:2rpx solid rgb(255, 255, 255);
line-height:51px;
padding-left:10px;
}
.person_box{
position: relative;
}
.phone_select{
margin-top:0;
z-index: 100;
position: absolute;
}
.select_one{
text-align: center;
background-color:rgb(239, 239, 239);
width:676rpx;
height:100rpx;
line-height:100rpx;
margin:0 5%;
border-bottom:2rpx solid rgb(255, 255, 255);
}
.personal_image{
z-index: 100;
position: absolute;
right:2.5%;
width: 34rpx;
height: 20rpx;
margin:40rpx 20rpx 40rpx 0;
transition: All 0.4s ease;
-webkit-transition: All 0.4s ease;
}
.rotateRight{
transform: rotate(180deg);
}3 .js
Page({
data:{
selectPerson:true,
firstPerson:'興趣',
selectArea:false,
},
//點擊選擇類型
clickPerson:function(){
var selectPerson = this.data.selectPerson;
if(selectPerson == true){
this.setData({
selectArea:true,
selectPerson:false,
})
}else{
this.setData({
selectArea:false,
selectPerson:true,
})
}
} ,
//點擊切換
mySelect:function(e){
this.setData({
firstPerson:e.target.dataset.me,
selectPerson:true,
selectArea:false,
})
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})
Verwandte Empfehlungen:
JavaScript-Simulation-Dropdown-Menü-Code_Form-Effekte
Das obige ist der detaillierte Inhalt vonBeispiel für die Entwicklung eines WeChat-Applet-Simulations-Dropdown-Menüs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
So erstellen Sie ein Dropdown-Menü in der WPS-Tabelle
Mar 21, 2024 pm 01:31 PM
So erstellen Sie das Dropdown-Menü der WPS-Tabelle: Nachdem Sie die Zelle ausgew?hlt haben, in der Sie das Dropdown-Menü festlegen m?chten, klicken Sie nacheinander auf ?Daten“ und ?Gültigkeit“ und nehmen Sie dann die entsprechenden Einstellungen im Popup-Dialogfeld vor um unsere Speisekarte herunterzuziehen. Als leistungsstarke Office-Software verfügt WPS über die M?glichkeit, Dokumente, statistische Datentabellen usw. zu bearbeiten, was für viele Menschen, die mit Texten, Daten usw. arbeiten müssen, gro?en Komfort bietet. Um die WPS-Software geschickt nutzen zu k?nnen, müssen wir in der Lage sein, verschiedene grundlegende Vorg?nge der WPS-Software zu beherrschen. In diesem Artikel erfahren Sie, wie Sie die WPS-Software verwenden. Sie k?nnen die Menüvorg?nge in der angezeigten WPS-Tabelle nach unten verschieben. Nachdem Sie das WPS-Formular ge?ffnet haben, w?hlen Sie zun?chst das aus
So drucken Sie ein Word-Dokument ohne Kommentare
Apr 18, 2023 pm 02:19 PM
Bei Microsoft Word sind Kommentare wichtig, insbesondere wenn das Dokument von mehreren Personen gemeinsam genutzt wird. Jeder kann durch seine Kommentare etwas zum Inhalt des Dokuments hinzufügen. Es ist sehr wichtig, diese Kommentare zum sp?teren Nachschlagen aufzubewahren. Aber wenn Sie ein Dokument drucken müssen, müssen Sie dann wirklich Kommentare drucken? In einigen F?llen ja. Aber in einigen anderen F?llen ist das ein gro?es Nein! In diesem Artikel erkl?ren wir anhand zweier verschiedener L?sungen, wie Sie ganz einfach ein Word-Dokument drucken k?nnen, ohne die Kommentare dazu auszudrucken. Bitte beachten Sie, dass Kommentare nur ausgeblendet sind und nicht gel?scht werden. Daher gef?hrden Sie hier auf keinen Fall einen Teil Ihres Dokuments, indem Sie es kommentarlos ausdrucken. Ich hoffe, es gef?llt euch! L?sung 1: Bestehen
So erstellen Sie eine Dropdown-Liste mit Symbolen in Excel
Apr 14, 2023 am 09:04 AM
Das Erstellen einer Dropdown-Liste in einem Excel-Arbeitsblatt ist einfach, solange es sich um ein normales Dropdown-Menü handelt. Aber was ist, wenn Sie es durch das Hinzufügen eines besonderen Symbols zu etwas Besonderem machen oder es durch das Hinzufügen von Text und Symbolen noch spezieller machen müssen? Ok, klingt interessant, aber Sie fragen sich, ob das m?glich ist? Welche Antwort wissen Sie nicht, wenn Geek Page hier ist, um zu helfen? In diesem Artikel geht es um die Erstellung von Dropdown-Menüs mit Symbolen sowie Symbolen und Text. Ich hoffe, Ihnen hat die Lektüre dieses Artikels gefallen! Lesen Sie auch: So fügen Sie ein Dropdown-Menü in Microsoft Excel hinzu Teil 1: Erstellen Sie eine Dropdown-Liste nur mit Symbolen Um ein Dropdown-Menü mit Symbolen zu erstellen, müssen wir zun?chst die Quelle erstellen
So fügen Sie künstlerische Seitenr?nder in Microsoft Word hinzu
Apr 27, 2023 pm 08:25 PM
Sind Sie es leid, st?ndig die traditionellen schwarzen R?nder in Ihren Word-Dokumenten zu sehen? Suchen Sie nach M?glichkeiten, Ihren Dokumenten farbenfrohe und künstlerische R?nder hinzuzufügen, um sie attraktiver und unterhaltsamer zu gestalten? Wie w?re es, wenn Sie verschiedenen Seiten Ihres Word-Dokuments unterschiedliche künstlerische R?nder hinzufügen würden? Oder einen einzigen künstlerischen Rahmen auf alle Seiten im Dokument gleichzeitig anwenden? Ich wei?, dass Sie von dieser ganzen Sache mit den künstlerischen Grenzen genauso begeistert sind wie wir! Lesen Sie direkt diesen Artikel, um zu erfahren, wie Sie erfolgreich künstlerische R?nder auf Word-Dokumente anwenden. Teil 1: So wenden Sie den gleichen künstlerischen Seitenrand auf alle Seiten in einem Word-Dokument an. Schritt 1: ?ffnen Sie das Word-Dokument und klicken Sie im oberen Menüband auf die Registerkarte ?Design“. W?hlen Sie im DESIGN
Entwickeln Sie ein WeChat-Applet mit Python
Jun 17, 2023 pm 06:34 PM
Mit der Popularit?t mobiler Internettechnologie und Smartphones ist WeChat zu einer unverzichtbaren Anwendung im Leben der Menschen geworden. Mit WeChat-Miniprogrammen k?nnen Benutzer Miniprogramme direkt verwenden, um einige einfache Anforderungen zu erfüllen, ohne Anwendungen herunterladen und installieren zu müssen. In diesem Artikel wird erl?utert, wie Sie mit Python ein WeChat-Applet entwickeln. 1. Vorbereitung Bevor Sie Python zum Entwickeln des WeChat-Applets verwenden, müssen Sie die entsprechende Python-Bibliothek installieren. Hier empfiehlt es sich, die beiden Bibliotheken wxpy und itchat zu verwenden. wxpy ist eine WeChat-Maschine
Implementieren Sie Kartenumdreheffekte in WeChat-Miniprogrammen
Nov 21, 2023 am 10:55 AM
Implementieren von Kartenumdreheffekten in WeChat-Miniprogrammen In WeChat-Miniprogrammen ist die Implementierung von Kartenumdreheffekten ein h?ufiger Animationseffekt, der die Benutzererfahrung und die Attraktivit?t von Schnittstelleninteraktionen verbessern kann. Im Folgenden wird detailliert beschrieben, wie der Kartenumdrehungseffekt im WeChat-Applet implementiert wird, und relevante Codebeispiele bereitgestellt. Zun?chst müssen Sie in der Seitenlayoutdatei des Miniprogramms zwei Kartenelemente definieren, eines für die Anzeige des vorderen Inhalts und eines für die Anzeige des hinteren Inhalts. Der spezifische Beispielcode lautet wie folgt: <!--index.wxml-. ->&l
5 M?glichkeiten (und L?sungen), Ihren Bildschirm für die überwachung unter Windows 11 anzupassen
Apr 14, 2023 pm 03:28 PM
Aufgrund der jüngsten Verbesserungen auf der ganzen Welt sind PC-Teile jetzt zum UVP erh?ltlich, was viele Benutzer dazu veranlasst hat, endlich ihren Traum-PC zu bauen. Der Bau eines PCs kann seine Herausforderungen mit sich bringen, und eine der Aufgaben besteht darin, den Bildschirm an die Anzeige Ihres Monitors anzupassen. Wenn Sie unter Windows 11 keinen Bildschirm an Ihren Monitor anpassen k?nnen, finden Sie hier alles, was Sie wissen müssen. Fangen wir an. So passen Sie Ihren Bildschirm für die überwachung unter Windows 11 auf 5 Arten an Um Ihren Bildschirm an Ihren Monitor anzupassen, k?nnen Sie die Aufl?sung, Skalierung oder Anzeigeausgabeeinstellungen basierend auf Ihren aktuellen Einstellungen anpassen. Wir empfehlen Ihnen, die Aufl?sung zu ?ndern, um die visuelle Qualit?t und die Aufl?sung beizubehalten. Wenn dies jedoch bei Ihnen nicht funktioniert, k?nnen Sie es versuchen
Implementieren Sie den Dropdown-Menüeffekt im WeChat-Applet
Nov 21, 2023 pm 03:03 PM
Um den Dropdown-Menüeffekt in WeChat-Miniprogrammen zu implementieren, sind spezifische Codebeispiele erforderlich. Mit der Popularit?t des mobilen Internets sind WeChat-Miniprogramme zu einem wichtigen Bestandteil der Internetentwicklung geworden, und immer mehr Menschen haben begonnen, darauf zu achten Verwenden Sie WeChat Mini-Programme. Die Entwicklung von WeChat-Miniprogrammen ist einfacher und schneller als die herk?mmliche APP-Entwicklung, erfordert jedoch auch die Beherrschung bestimmter Entwicklungsf?higkeiten. Bei der Entwicklung von WeChat-Miniprogrammen sind Dropdown-Menüs eine h?ufige UI-Komponente, um eine bessere Benutzererfahrung zu erzielen. In diesem Artikel wird detailliert beschrieben, wie der Dropdown-Menüeffekt im WeChat-Applet implementiert wird, und es werden praktische Informationen bereitgestellt
