Analisis ringkas tentang cara membuat skrol-view scroll mengikut kedudukan yang ditetapkan dalam program mini

Artikel ini akan memperkenalkan kepada anda cara membuat tatal paparan tatal mengikut kedudukan yang ditetapkan dalam applet WeChat Anda boleh mendapatkan pengalaman yang sangat baik tanpa menulis skrip js tambahan.

Latar belakang adalah seperti ini applet WeChat mempunyai tab halaman penukaran tab mempunyai dua kotak kandungan yang saya gunakan scroll-view untuk membuat itu. , dan kemudian apabila menukar halaman tab, bar skrol yang sepadan dalam scroll-view perlu diletakkan di atas. [Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Kita dapat melihat bahawa terdapat atribut scroll-view dalam keterangan dokumen rasmi scroll-into-view Penerangan atribut ini adalah seperti berikut

Nilai tatal ke dalam paparan hendaklah id subelemen tertentu (id tidak boleh bermula dengan nombor). Tetapkan arah mana yang boleh ditatal, kemudian tatal ke elemen ke arah mana

Kemudian kita boleh membuat kekecohan dalam atribut ini, hanya letakkan nilai id dalam scroll-view untuk menetapkan nilai tersuai Anda boleh sedar bahawa apabila menukar tab, bar skrol kotak kandungan yang sepadan secara automatik akan menatal ke atas, seperti yang ditunjukkan dalam kod berikut Kod berikut ditunjukkan oleh saya menggunakan rangka kerja applet Taro dan perkara yang sama berlaku untuk asli satu.

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
export default class Index extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
    }
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }
  render () {
    const tabList = [{ title: '标签第一页' }, { title: '标签第二页' }, { title: '标签第三页' }]
    return (
      <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
        <AtTabsPane current={this.state.current} index={0} >
          <ScrollView scrollY scrollIntoView=&#39;content-0&#39;>
          <View id=&#39;content-0&#39;></View>
          标签页一的内容
          </ScrollView>
        </AtTabsPane>
        <AtTabsPane current={this.state.current} index={1} >
          <ScrollView scrollY scrollIntoView=&#39;content-1&#39;>
          <View id=&#39;content-1&#39;></View>
          标签页二的内容
          </ScrollView>
        </AtTabsPane>
        <AtTabsPane current={this.state.current} index={2} >
          <ScrollView scrollY scrollIntoView=&#39;content-2&#39;>
          <View id=&#39;content-2&#39;></View>
          标签页三的内容
          </ScrollView>
        </AtTabsPane>
      </AtTabs>
    )
  }
}

Jika tab dengan nilai id scroll-view diletakkan dalam content-0 yang pertama view, maka apabila menukar halaman tab, scroll-view akan menjadi berdasarkan tetapan kami Atribut scroll-into-view diletakkan pada id elemen kanak-kanak untuk mencapai kesan bar skrol secara automatik bergerak ke atas

<AtTabsPane current={this.state.current} index={0} >
  <ScrollView scrollY scrollIntoView=&#39;content-0&#39;>
    <View id=&#39;content-0&#39;></View>
    标签页一的内容
  </ScrollView>
</AtTabsPane>

Dengan cara yang sama, jika anda memerlukannya bar skrol untuk ditatal ke kedudukan paling rendah, letakkan id elemen anak yang sepadan pada Tahap terendah sudah cukup Contohnya, dalam sesetengah antara muka sembang, anda perlu mencari yang terkini

<AtTabsPane current={this.state.current} index={0} >
  <ScrollView scrollY scrollIntoView=&#39;content-0&#39;>
    标签页一的内容
    <View id=&#39;content-0&#39;></View>
  </ScrollView>
</AtTabsPane>

Untuk lebih banyak pengaturcaraan. -pengetahuan berkaitan, sila layari: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis ringkas tentang cara membuat skrol-view scroll mengikut kedudukan yang ditetapkan dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!