Comment créer des icônes mobiles dans Uniapp

Comment créer des icônes mobiles dans uniapp : ouvrez d'abord le fichier de code html ; puis définissez l'élément glisser mobile dans uni-app ; enfin définissez l'attribut "pointer-events" dans le style CSS pour le rendre mobile. icône flottante.

L'environnement d'exploitation de ce tutoriel : système windows7, version uni-app2.5.1 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé (gratuit) : Tutoriel de développement d'uni-app

Icône flottante déplaçable d'uni-app

Non. une exigence dans les deux projets,

pour créer une icône d'enveloppe rouge pour débutant dans uni-app, ce qui nécessite un glissement en plein écran et une position initiale fixe.

Le style est comme ceci :

Ce qui suit est ma solution

1. il y a des éléments de glisser spéciaux mobiles, le code html est le suivant

<movable-area class="movableArea" v-else-if="isShowPhone==0">
<movable-view class="movableView" direction="all" x="600rpx" y="800rpx">
<image :src="imgurl +&#39;small_hb.png&#39;" mode="widthFix" @click="to_xfj_gg"></image>
<text>余额：￥{{hb_ye}}</text>
</movable-view>
</movable-area>

. moving-view est un élément déplaçable, et moving-area est la plage de déplacement de l'élément

2.

Après l'avoir configuré, j'ai découvert que l'enveloppe rouge pouvait être. cliqué, mais sur d'autres éléments de la page. Il est impossible de cliquer car la zone mobile bloque d'autres éléments et ne peut pas être résolue à l'aide de z-index. Après les conseils de Du Niang, les événements de pointeur doivent être définis dans le style CSS

.movableArea {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
            pointer-events: none;//设置area元素不可点击，则事件便会下移至页面下层元素
.movableView {
                pointer-events: auto;//可以点击
width: 120rpx;
height: 110rpx;
image {
width: 100%;
height: 100%;
}
text {
position: absolute;
left: 0;
bottom:0;
width: 120rpx;
height: 18rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 16rpx;
color: #ffffff;
}
}
}

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!