Cara menetapkan gaya berbeza secara dinamik dalam uniapp

Dengan pembangunan berterusan pasaran aplikasi mudah alih dan permintaan pengguna yang semakin meningkat untuk aplikasi mudah alih, pembangun telah secara beransur-ansur memulakan laluan perkongsian berbilang terminal untuk pembangunan aplikasi mudah alih juga perlu menyediakan perkhidmatan yang berbeza dalam senario yang berbeza kesan dan pengalaman interaktif, dan Uniapp boleh memenuhi permintaan ini Dengan menulis kod, anda boleh mencapai output kesan visual yang berbeza pada terminal yang berbeza dan resolusi yang berbeza.

Uniapp ialah rangka kerja bahagian hadapan yang dibangunkan berdasarkan Vue.js Ia boleh melaksanakan satu kod untuk membina aplikasi untuk berbilang platform, termasuk program mini WeChat, H5, program mini Alipay, APP, dll. Artikel ini akan menumpukan pada cara menetapkan gaya berbeza untuk Uniapp secara dinamik.

Tetapan dinamik gaya

Dalam Uniapp, jika anda ingin menetapkan gaya komponen secara dinamik, anda boleh menggunakan atribut :style untuk mencapai ini. Sebagai contoh, tentukan komponen view dalam fail vue, dan kemudian tetapkan gayanya melalui atribut :style:

<template>
  <view :style="dynamicStyle"></view>
</template>

<script>
export default {
  data () {
    return {
      dynamicStyle: {
        backgroundColor: '#f0f0f0'
      }
    }
  }
}
</script>

Dalam kod di atas, kami menentukan komponen view dan tetapkan gayanya melalui pembolehubah data A dynamicStyle ditetapkan, di mana kita menetapkan backgroundColor kepada kelabu. Kemudian, kami menggunakan atribut view dalam komponen :style untuk menetapkan gaya secara dinamik.

Di sini kami hanya menetapkan atribut gaya ringkas Malah, kami juga boleh menetapkan lebih banyak atribut, termasuk font-size, width, height, margin, padding dan sebagainya.

Walau bagaimanapun, menggunakan kaedah di atas untuk menetapkan gaya hanya boleh mencapai tetapan gaya global Jika adegan tertentu memerlukan tetapan gaya yang berbeza, gaya perlu diubah secara dinamik.

Tetapkan gaya berbeza secara dinamik

Cara menetapkan gaya secara dinamik yang dinyatakan di atas, berikut akan memperkenalkan cara menetapkan gaya berbeza secara dinamik.

Uniapp menyokong gaya pengendalian melalui JavaScript, yang membolehkan kami menetapkan gaya berbeza secara dinamik.

Sebagai contoh, untuk komponen view, kita boleh menukar atributnya melalui JavaScript untuk mengubah suai gaya komponen:

this.$refs.target.style.backgroundColor = '#F00'

Dalam kod di atas, kita mula-mula memperoleh view ref komponen, dan kemudian menukar warna latar belakang komponen secara dinamik melalui style.

Jadi, bagaimana untuk melaksanakan tetapan gaya berbeza mengikut senario berbeza dalam Uniapp?

Tukar gaya dengan menilai syarat

Cara pertama untuk melaksanakannya ialah menukar gaya secara dinamik dengan menilai keadaan Contohnya, kita boleh mengawal tetapan gaya yang berbeza dengan menilai jenis peranti.

Berikut ialah contoh menentukan sama ada peranti itu peranti iOS:

<template>
  <view :style="dynamicStyle"></view>
</template>

<script>
export default {
  data () {
    return {
      dynamicStyle: {}
    }
  },
  onLoad () {
    // 判断是否是 iOS 设备
    const isIOS = uni.getSystemInfoSync().platform === 'ios'
    if (isIOS) {
      this.dynamicStyle.backgroundColor = '#ff0'
    } else {
      this.dynamicStyle.backgroundColor = '#f00'
    }
  }
}
</script>

Dalam kod di atas, kami mula-mula mentakrifkan objek kosong dynamicStyle dan kemudian tentukan peranti dalam onLoad fungsi cangkuk kitaran hayat Jenis, tetapkan warna latar belakang kepada kuning jika ia peranti iOS, atau merah sebaliknya.

Dengan cara ini, kita boleh menukar gaya secara dinamik mengikut keadaan berbeza, seterusnya mencapai pembezaan gaya berbeza.

Menukar gaya melalui helaian gaya

Kaedah pelaksanaan kedua ialah memperkenalkan helaian gaya secara dinamik untuk mengawal tetapan gaya berbeza.

Pertama, kita perlu menulis helaian gaya dalam teg style Contohnya, kita mentakrifkan helaian gaya bernama red-bg:

<style>
.red-bg {
  background-color: #f00;
}
</style>

Kemudian, apabila kita memerlukannya Lembaran gaya. boleh diperkenalkan secara dinamik melalui objek this.$refs Contohnya, jika kita perlu menambah gaya red-bg pada komponen tertentu dalam halaman apabila keadaan tertentu adalah benar, kita boleh menulis kod seperti ini:

this.$refs.target.classList.add('red-bg')

.

Di atas Dalam kod, kami memperoleh komponen bernama target dalam halaman dan menambah classList helaian gaya melalui kaedah add objek red-bg.

Dengan cara ini, kami boleh memperkenalkan helaian gaya yang berbeza dalam situasi yang berbeza untuk mencapai tetapan gaya yang berbeza.

Ringkasan

Artikel ini terutamanya memperkenalkan cara menetapkan gaya berbeza secara dinamik dalam Uniapp dan mengawal tetapan gaya berbeza dengan menilai keadaan atau memperkenalkan helaian gaya secara dinamik.

Dalam pembangunan sebenar, kita perlu memilih kaedah pelaksanaan yang berbeza mengikut senario dan keperluan perniagaan tertentu, supaya dapat membina aplikasi mudah alih yang memenuhi keperluan pengguna.

Atas ialah kandungan terperinci Cara menetapkan gaya berbeza secara dinamik dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!