Cara memilih dan menukar gaya dalam Uniapp

Dengan pembangunan berterusan Internet mudah alih, jurang antara aplikasi asli dan aplikasi web telah mengecil secara beransur-ansur Rangka kerja pembangunan merentas platform yang dipanggil Uniapp telah muncul dan telah menjadi alat pilihan bagi banyak pembangun. Dalam Uniapp, sama dengan helaian gaya CSS dalam pembangunan web, kami boleh menggunakan gaya untuk mengubah suai kesan UI komponen semasa proses pembangunan, kami biasanya menghadapi situasi di mana kami perlu menukar gaya komponen berdasarkan keadaan pilihannya artikel Kami akan memperkenalkan cara menggunakan Uniapp untuk menukar gaya yang dipilih.

1. Gunakan v-bind untuk mengikat gaya

Dalam Uniapp, kita boleh menggunakan v-bind untuk mengikat atribut tertentu komponen, seperti kelas, gaya, dll., supaya apabila ia terikat Apabila nilai pembolehubah tertentu berubah, gaya komponen juga akan berubah dengan sewajarnya. Oleh itu, kita boleh menukar nilai atribut terikat komponen secara dinamik mengikut keadaan pilihannya, dengan itu mencapai kesan memilih dan menukar gaya.

<template>
  <view 
    :class="{selected: isSelected}"
    @tap="toggleSelect"
  >
    我是一个组件
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isSelected: false
    }
  },
  methods: {
    toggleSelect() {
      this.isSelected = !this.isSelected
    }
  }
}
</script>
 
<style>
.selected {
  background-color: #00BFFF;
  color: #fff;
}
</style>

Dalam kod di atas, kami menggunakan v-bind:class untuk mengikat atribut kelas komponen paparan dan mengikatnya kepada pembolehubah isSelected. Apabila isSelected adalah benar, nilai atribut kelas komponen akan berubah kepada "dipilih", menyebabkan gaya komponen berubah Apabila isSelected adalah palsu, ia akan kembali kepada keadaan asalnya.

Pada masa yang sama, kami juga telah mengikat peristiwa ketik pada komponen paparan Apabila pengguna mengklik pada komponen, kaedah toggleSelect akan dicetuskan operasi.

2 Gunakan atribut terkira

Selain menggunakan gaya v-bind untuk mengikat, kami juga boleh menggunakan atribut terkira yang disediakan oleh Uniapp untuk mengira gaya komponen secara dinamik dan mencapai kesan memilih dan mengubah gaya . Atribut yang dikira biasanya digunakan untuk menjana beberapa data secara dinamik dalam halaman, tetapi kami juga boleh menggunakannya untuk gaya yang dikira.

<template>
  <view 
    :style="boxStyle"
    @tap="toggleSelect"
  >
    我是一个组件
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isSelected: false
    }
  },
  computed: {
    boxStyle() {
      if (this.isSelected) {
        return {
          backgroundColor: '#00BFFF',
          color: '#fff'
        }
      } else {
        return {
          backgroundColor: '#fff',
          color: '#000'
        }
      }
    }
  },
  methods: {
    toggleSelect() {
      this.isSelected = !this.isSelected
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan atribut yang dikira untuk mengira gaya komponen paparan. Apabila isSelected adalah benar, kaedah boxStyle dalam atribut yang dikira akan mengembalikan objek yang mengandungi gaya yang dipilih apabila isSelected adalah palsu, ia akan mengembalikan objek yang mengandungi gaya asal. Dengan cara ini, kita boleh mengira gaya komponen secara dinamik dalam sifat yang dikira dan mencapai kesan menukar gaya apabila dipilih.

Kesimpulan

Artikel ini terutamanya memperkenalkan kaedah menggunakan atribut v-bind dan dikira dalam Uniapp untuk melaksanakan pemilihan dan menukar gaya. Melalui kedua-dua kaedah ini, kita boleh memilih kaedah yang sesuai secara fleksibel mengikut keperluan khusus, supaya cepat mencapai tujuan memilih dan menukar gaya.

Atas ialah kandungan terperinci Cara memilih dan menukar gaya dalam Uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!