uniapp mengalih keluar bar skrol

Dengan populariti aplikasi mudah alih, uniapp, sebagai rangka kerja pembangunan aplikasi silang berdasarkan Vue.js, digunakan secara meluas pada berbilang platform. Apa yang saya ingin bincangkan di sini ialah cara mengalih keluar bar skrol lalai uniapp dalam applet.

Secara lalai, komponen seperti Swiper dan ScrollView dalam program mini akan memaparkan bar skrol pada iOS dan Android, tetapi dalam industri kadangkala perlu menyembunyikan bar skrol ini. Jadi, bagaimanakah kita hendak menyingkirkan bar skrol ini? Seterusnya, saya akan memberikan anda penyelesaian khusus.

Bar tatal applet uniapp disediakan oleh klien WeChat secara lalai dan klien WeChat tidak mendedahkan API yang sepadan untuk operasi. Jadi untuk mengalih keluar bar skrol, kita perlu bermula dengan rangka kerja pembangunan uniapp.

Kaedah 1: Dengan menetapkan gaya Halaman

Tambahkan kod berikut dalam App.vue:

<style>
  /* 去掉小程序swiper组件的滚动条 */
  .swiper-container, .swiper-wrapper, .swiper-slide {
    overflow: hidden !important;
  }
  /* 去掉小程序scroll-view组件的滚动条 */
  .scroll-view {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .scroll-view::-webkit-scrollbar {
    display: none !important;
  }
</style>

Dengan menetapkan scroll-view's -scrollbar-width dan -ms- gaya limpahan tiada, dan kemudian tetapkan bar skrol tidak kelihatan melalui ::-webkit-scrollbar untuk mengalih keluar bar skrol.

Walau bagaimanapun, kelemahan kaedah ini ialah apabila halaman kami lebih kompleks, ia boleh menyebabkan kekeliruan gaya halaman.

Kaedah 2: Gunakan pemalam

Dalam pasaran pemalam uniapp, terdapat perpustakaan komponen yang dipanggil "uni-ui", dan dalam perpustakaan komponen ini terdapat komponen yang dipanggil "uni-list" , yang menyokong bar skrol tersuai dan boleh digunakan untuk mengalih keluar bar skrol lalai.

Langkah-langkah untuk menggunakan komponen ini adalah seperti berikut:

Pertama, kita perlu memperkenalkan komponen uni-list dalam komponen:

<template>
  <view>
    <uni-list :show-scrollbar="false">
      <uni-list-item>item1</uni-list-item>
      <uni-list-item>item2</uni-list-item>
      <uni-list-item>item3</uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list/uni-list-item.vue'

export default {
  components: {
    uniList,
    uniListItem
  }
}
</script>

Dengan menetapkan atribut show-scrollbar daripada senarai-uni kepada palsu untuk menyembunyikan bar skrol lalai.

Setakat ini, kami telah memperkenalkan dua kaedah untuk mengalih keluar bar skrol lalai dalam applet uniapp. Perlu diingat bahawa walaupun kedua-dua kaedah boleh mencapai kesan mengalih keluar bar skrol, disebabkan oleh mekanisme kemas kini klien WeChat, kaedah ini mungkin tidak berkesan pada beberapa versi. Apabila masalah bar skrol berlaku dalam aplikasi kami, kami perlu menguji versi yang berbeza untuk mencari masalah dan mengendalikannya dengan sewajarnya.

Ringkasnya, terdapat banyak cara untuk mengalih keluar bar skrol lalai dalam applet uniapp Anda boleh memilih penyelesaian yang sesuai mengikut situasi dan keperluan yang berbeza.

Atas ialah kandungan terperinci uniapp mengalih keluar bar skrol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!