uniapp은 메소드 함수의 스타일을 수정합니다.-uni-app-php.cn

uniapp은 메소드 함수의 스타일을 수정합니다.

PHPz

풀어 주다： 2023-05-26 17:22:08

원래의

1607명이 탐색했습니다.

유니앱 개발을 하다 보면 페이지의 스타일을 동적으로 수정해야 하는 경우가 종종 있는데, 일반적인 방법 중 하나가 메소드 함수에서 스타일을 변경하는 것입니다. 이번 글에서는 이 메소드를 구현하는 방법을 설명하겠습니다.

일반적으로 uni-app에서 제공하는 함수 내 내장 메소드를 사용하여 스타일을 수정할 수 있습니다. 예를 들어, 페이지의 특정 구성 요소를 가져오는 함수에서 uni.$refs를 사용할 수 있습니다. 그런 다음 style 및 class와 같은 구성 요소의 속성을 통해 스타일을 동적으로 수정할 수 있습니다. uni.$refs，来获取页面中的某一个组件。然后，我们就可以通过组件的属性，比如style和class，来动态地修改样式。

下面让我们通过一个具体的示例来帮助大家更好地理解这个过程。假设我们有一个小程序的登录页面，其中页面的布局样式如下：

<template>
  <view>
    <form>
      <input type="text" placeholder="用户名" />
      <input type="password" placeholder="密码" />
      <button>登录</button>
    </form>
  </view>
</template>

<style scoped>
  form {
    width: 80%;
    margin: 10vw;
    padding: 5vw;
    background-color: #fff;
  }
  input {
    margin-bottom: 3vw;
    width: 100%;
    height: 10vw;
    border: 0;
    border-radius: 3vw;
    background-color: #f2f2f2;
  }
  button {
    width: 100%;
    height: 12vw;
    border: 0;
    border-radius: 3vw;
    color: #fff;
    background-color: #007aff;
    font-size: 4.5vw;
  }
</style>

로그인 후 복사

让我们假设我们现在需要实现以下需求：当用户提交表单时，如果表单中的某个输入框没有填写，则需要将其底边框的颜色更改为红色。具体而言，我们需要将 placeholder 属性的值修改为 未填写，并为该输入框添加样式 border-bottom-color: red。

为实现该需求，我们首先需要使用 uni.$refs 方法来获取到该输入框组件，接下来我们需要改变该组件的样式。

<template>
  <view>
    <form>
      <input ref="username" type="text" placeholder="用户名" />
      <input ref="password" type="password" placeholder="密码" />
      <button @click="login">登录</button>
    </form>
  </view>
</template>

<script>
export default {
  methods: {
    login() {
      if (!this.$refs.username.value.trim()) {
        this.$refs.username.placeholder = '未填写'
        this.$refs.username.style.borderBottomColor = 'red'
      }

      if (!this.$refs.password.value.trim()) {
        this.$refs.password.placeholder = '未填写'
        this.$refs.password.style.borderBottomColor = 'red'
      }
    },
  },
}
</script>

로그인 후 복사

在上面这段代码中，我们为每一个输入框组件添加了 ref 属性，用于获取到该组件的引用。我们在登录函数中判断了输入框的内容是否为空，如果为空，我们就将 placeholder 属性的值修改为 未填写，并为该输入框添加样式 border-bottom-color: red。

注意，我们使用的是$refs.而非refs.，这是因为在uni-app中，$refs是一个内置的对象，它可以访问到所有具有ref属性的组件。

总之，通过这篇文章，我们了解了在uni-app中如何在方法函数中修改样式的方法。当然，这只是其中的一种实现方式，还有很多其他的方法，如在函数中使用this.setData()

이 프로세스를 더 잘 이해할 수 있도록 구체적인 예를 들어 보겠습니다. 페이지의 레이아웃 스타일이 다음과 같은 작은 프로그램에 대한 로그인 페이지가 있다고 가정해 보겠습니다. 🎜rrreee🎜 이제 다음 요구 사항을 구현해야 한다고 가정해 보겠습니다. 사용자가 양식을 제출할 때, 입력 상자가 양식이 채워지지 않은 경우 양식을 작성해야 합니다. 하단 테두리 색상이 빨간색으로 변경됩니다. 특히 placeholder 속성 값을 unfilled로 변경하고 입력 상자 border-bottom-color: red에 스타일을 추가해야 합니다. . 🎜🎜이 요구 사항을 충족하려면 먼저 uni.$refs 메서드를 사용하여 입력 상자 구성 요소를 가져온 다음 구성 요소의 스타일을 변경해야 합니다. 🎜rrreee🎜위 코드에서는 각 입력 상자 구성 요소에 ref 속성을 추가하여 구성 요소에 대한 참조를 얻었습니다. 로그인 함수에서는 입력 상자의 내용이 비어 있는지 확인합니다. 비어 있으면 placeholder 속성 값을 Not fill in으로 변경하고 설정합니다. 입력 상자에 border-bottom-color: red 스타일을 추가하세요. 🎜🎜 refs. 대신 $refs.를 사용하고 있다는 점에 유의하세요. 이는 uni-app에서 $refs가 A 빌드이기 때문입니다. - ref 속성이 있는 모든 구성 요소에 액세스할 수 있는 개체입니다. 🎜🎜간단히 이번 글을 통해 유니앱의 메소드 함수에서 스타일을 수정하는 방법을 알아보았습니다. 물론 이것은 구현 방법 중 하나일 뿐이며 데이터 상태를 변경하는 함수에서 this.setData() 메서드를 사용하거나 CSS 의사 클래스를 사용하는 등 다른 방법도 많이 있습니다. 선택자 등이 있습니다. 이러한 기술을 익히면 사용자 요구에 맞게 페이지 스타일을 보다 유연하게 조정할 수 있습니다. 🎜

위 내용은 uniapp은 메소드 함수의 스타일을 수정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!