집 >웹 프론트엔드 >JS 튜토리얼 >WeChat 애플릿을 사용하여 자리 표시자 프롬프트 텍스트를 동적으로 설정하는 방법

WeChat 애플릿을 사용하여 자리 표시자 프롬프트 텍스트를 동적으로 설정하는 방법

亚连원래의: 2018-06-20 16:35:283917검색

이 글은 주로 자리 표시자 프롬프트 텍스트와 버튼 선택/취소 상태를 동적으로 설정하는 WeChat 애플릿 방법을 소개하며, this.setData를 사용하여 속성 데이터를 동적으로 설정하는 이벤트 바인딩 및 관련 작업 기술을 포함합니다.

이 글은 기사에서는 자리 표시자 프롬프트 텍스트와 버튼 선택 및 취소 상태를 동적으로 설정하는 WeChat 애플릿 방법의 예를 설명합니다. 참조를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

Rendering display

클릭 이벤트 자리 표시자 메서드를 바인딩하여 data-num 값을 가져오고 num이 얼마나 같은지 판단합니다. class="{{num==X?'active':''}}" 수식은 어떤 태그가 선택되었는지 결정합니다(예: 파란색 배경에 흰색 텍스트).

js는 data-key

를 획득하여 입력 입력 상자에 자리 표시자의 동적 값을 설정합니다. wxml의 내용:

<view class="retrieve-list">
  <p class="option">
    <span bindtap="placeholder" data-num=&#39;1&#39; data-key=&#39;&#39; data-val=&#39;&#39; class="{{num==1?&#39;active&#39;:&#39;&#39;}}">全部</span>
    <span bindtap="placeholder" data-num=&#39;2&#39; data-key=&#39;标题&#39; data-val=&#39;ti&#39; class="{{num==2?&#39;active&#39;:&#39;&#39;}}">标题</span>
    <span bindtap="placeholder" data-num=&#39;3&#39; data-key=&#39;摘要&#39; data-val=&#39;ab&#39; class="{{num==3?&#39;active&#39;:&#39;&#39;}}">摘要</span>
    <span bindtap="placeholder" data-num=&#39;4&#39; data-key=&#39;申请人&#39; data-val=&#39;ap&#39; class="{{num==4?&#39;active&#39;:&#39;&#39;}}">申请人</span>
    <span bindtap="placeholder" data-num=&#39;5&#39; data-key=&#39;申请号&#39; data-val=&#39;an&#39; class="{{num==5?&#39;active&#39;:&#39;&#39;}}">申请号</span>
    <span bindtap="placeholder" data-num=&#39;6&#39; data-key=&#39;代理人&#39; data-val=&#39;ag&#39; class="{{num==6?&#39;active&#39;:&#39;&#39;}}">代理人</span>
  </p>
  <p class="option">
    <span bindtap="placeholder" data-num=&#39;7&#39; data-key=&#39;代理机构&#39; data-val=&#39;ac&#39; class="{{num==7?&#39;active&#39;:&#39;&#39;}}">代理机构</span>
    <span bindtap="placeholder" data-num=&#39;8&#39; data-key=&#39;公开号&#39; data-val=&#39;pn&#39; class="{{num==8?&#39;active&#39;:&#39;&#39;}}">公开号</span>
    <span bindtap="placeholder" data-num=&#39;9&#39; data-key=&#39;发明人&#39; data-val=&#39;in&#39; class="{{num==9?&#39;active&#39;:&#39;&#39;}}">发明人</span>
    <span bindtap="placeholder" data-num=&#39;10&#39; data-key=&#39;专利权人&#39; data-val=&#39;pa&#39; class="{{num==10?&#39;active&#39;:&#39;&#39;}}">专利权人</span>
  </p>
</view>

js의 내용:

var app = getApp()
Page({
 data: {
  placeholder:&#39;请输入&#39;,
  ph:&#39;&#39;,
  num:1,
  key:&#39;&#39;,
 },
 placeholder:function(e){
  var num = e.currentTarget.dataset.num
  this.setData({
   ph: this.data.placeholder+e.currentTarget.dataset.key
  })
  this.setData({
   num: num
  })
})

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

WeChat 애플릿을 사용하여 자리 표시자 프롬프트 텍스트를 동적으로 설정하는 방법

관련 기사