WeChat 애플릿은 버튼을 클릭하여 뷰 라벨의 위치를 ​​이동하는 기능을 구현합니다.

이 글에서는 버튼을 클릭하여 뷰 라벨을 이동하는 위치 기능을 구현하는 WeChat 애플릿을 주로 소개합니다. 여기에는 WeChat 애플릿 이벤트 바인딩 및 this.setData의 관련 작동 기술이 포함되어 데이터 값을 동적으로 수정한 후 뷰 라벨을 변경합니다. 다음

이 기사의 예에서는 버튼을 클릭하여 뷰 라벨을 이동하는 위치 기능을 WeChat 애플릿에서 구현한 방법을 설명합니다. 참고를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

2. 키 코드

index.wxml 파일

<view class="view" style="left:{{viewLeft}}px;">我是view标签</view>
<button class="btn" type="default" bindtap="changeLocation">点击我移动view标签的位置</button>

index.wxss 파일 :

.view{
  position: absolute;
  background: green;
  color: white;
  width: 40%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.btn{
  position: absolute;
  top:100px;
  width: 80%;
  left: 10%;
}

index.js file

Page({
  data:{
    viewLeft:0
  },
  changeLocation(){
    var viewLeft=this.data.viewLeft;
    viewLeft+=5;
    this.setData({
      viewLeft:viewLeft
    })
  }
})

보이는 뷰 구성 요소는 .view의

에 있는

viewLeft

값을 사용하여 뷰 라벨 이동 기능을 구현합니다.

position: absolute;进行绝对位置定位。逻辑层响应点击事件，使用this.setData动态改变style="left:{{viewLeft}}px;"위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 관련 권장사항:

사용자 정의 토스트 팝업 상자를 구현하기 위한 WeChat 애플릿 개발

WeChat 애플릿은 체크박스를 사용하여 다중 선택 상자 기능을 표시합니다. [소스 코드 첨부]

위 내용은 WeChat 애플릿은 버튼을 클릭하여 뷰 라벨의 위치를 ​​이동하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!