博客 / 詳情

返回

taro小程的ScrollView,完美解決動態高度問題

廢話不多説,直接上代碼

import { ScrollView } from "@tarojs/components";
import Taro, { useReady } from "@tarojs/taro";
 
const [scrollHeight, setScrollHeight] = useState('84vh');
 
useReady(() => {
  // 設置ScrollView的動態高度
  Taro.nextTick(() => {
    Taro.getSystemInfo({
      success: (res) => {
        const query = wx.createSelectorQuery();
        query.select("#scrollview").boundingClientRect();
        query.exec((resData) => {
          console.log('resres', res)
          console.log('resData', resData)
          if (resData && resData.length) {
            setScrollHeight(res.screenHeight - resData[0].top + "px")
          }
        });
      },
    });
  });
});
 
<ScrollView
  style={{ height: scrollHeight }}
  id="scrollview"
  scrollY
  scrollWithAnimation
  >
 
 
</ScrollView>
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.