scrollView中按鈕如何居下俺叭?

需求:
現(xiàn)在有這樣一種情況是在開發(fā)中經(jīng)常遇到的,外層是一個scrollview組件泰偿,組件內(nèi)部有很多組件高度不固定熄守,最后是一個按鈕,在不滿一個屏幕時按鈕位居底部耗跛,當(dāng)超過一屏幕時按鈕位于組件的末尾裕照,可以隨著scrollview滾動。
效果圖:


scrollbtn.gif

方法:
如果使用絕對定位布局position:absolute肯定是不可以调塌,因為按鈕會始終位于底部,當(dāng)組件超過一個屏幕時按鈕依然在屏幕底部晋南,不會隨著scrollview組件滾動。
然后想到flex布局里面有一個space-betweent類型羔砾,那么是不是可以將scrollview內(nèi)部的組件分為兩部分负间,按鈕與其他組件。然后在其他組件的外層套一個view姜凄,在使用space-betweent布局就可以了政溃。然后進行嘗試,發(fā)現(xiàn)在不滿一屏幕時檀葛,按鈕可以在底部顯示玩祟。當(dāng)組件高度超過一個屏幕時,發(fā)現(xiàn)還是不行屿聋。但是我覺的我的思路大概是正確的空扎,于是尋找問題出在哪里藏鹊。
后來還是被我發(fā)現(xiàn)了,原來問題出現(xiàn)在flex:1 這里转锈。
其實這個關(guān)鍵在于scrollview內(nèi)部組件的高度是多少盘寡,我們可以獲取到組件內(nèi)部的高度,如果超過一個屏幕就不設(shè)置flex:1這個屬性撮慨,不超過就設(shè)置這個屬性竿痰。

 核心代碼如下:
  layout = (event)=>{
        let { x, y, width, height } = event.nativeEvent.layout;
        if(height>(HEIGHT-SCALE(94)-SCALE(20)-SCALE(120))){
            this.setState({
                flex:false,
            })
        }else{
            this.setState({
                flex:true,
            })
        }
        console.log('height',height,'SCREENHEIGHT',HEIGHT-SCALE(94)-SCALE(20)-SCALE(120));
    };

  <ScrollView
                    overScrollMode = {'always'}
                    contentContainerStyle={[{justifyContent:'space-between'},this.state.flex?{flex:1}:null]}
                    keyboardDismissMode = {'on-drag'}
                    showsVerticalScrollIndicator={false}>
                    <View onLayout={this.layout}>
                    {this.renderRest()}
                    {this.renderRule()}
                    <View style={{marginTop:SCALE(20),marginLeft:SCALE(20),marginRight:SCALE(20),backgroundColor: 'white'}}>
                        {this.renderTip()}
                        {this.renderSeparator()}
                        {this.renderType()}
                        {this.renderSeparator()}
                        {this.renderDate()}
                        {this.renderSeparator()}
                        {this.renderCause()}
                    </View>
                    </View>
                 {this.renderBtn()}
                </ScrollView>

完整代碼僅供參考:
https://github.com/wuyunqiang/ReactNativeUtil/issues/7

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市砌溺,隨后出現(xiàn)的幾起案子影涉,更是在濱河造成了極大的恐慌,老刑警劉巖规伐,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蟹倾,死亡現(xiàn)場離奇詭異,居然都是意外死亡猖闪,警方通過查閱死者的電腦和手機鲜棠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來培慌,“玉大人豁陆,你說我怎么就攤上這事〕郴ぃ” “怎么了盒音?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長馅而。 經(jīng)常有香客問我里逆,道長,這世上最難降的妖魔是什么用爪? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮胁镐,結(jié)果婚禮上偎血,老公的妹妹穿的比我還像新娘。我一直安慰自己盯漂,他們只是感情好颇玷,可當(dāng)我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著就缆,像睡著了一般帖渠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上竭宰,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天空郊,我揣著相機與錄音份招,去河邊找鬼。 笑死狞甚,一個胖子當(dāng)著我的面吹牛锁摔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播哼审,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼谐腰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了涩盾?” 一聲冷哼從身側(cè)響起十气,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎春霍,沒想到半個月后砸西,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡终畅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年籍胯,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片离福。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡杖狼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出妖爷,到底是詐尸還是另有隱情蝶涩,我是刑警寧澤,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布絮识,位于F島的核電站绿聘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏次舌。R本人自食惡果不足惜熄攘,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望彼念。 院中可真熱鬧挪圾,春花似錦、人聲如沸逐沙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽吩案。三九已至棚赔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背靠益。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工丧肴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人捆毫。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓闪湾,卻偏偏與公主長得像,于是被迫代替她去往敵國和親绩卤。 傳聞我的和親對象是個殘疾皇子途样,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,515評論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件濒憋、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,029評論 4 62
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案何暇? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,728評論 1 92
  • 雖然我和父母生活在同一個環(huán)境里黔夭,但經(jīng)濟承受壓力卻不盡相同宏胯,他們面對幾塊錢的節(jié)儉程度,曾經(jīng)讓我覺得嗤之以鼻本姥,現(xiàn)在我試...
    胖尼姑閱讀 690評論 0 50
  • 今天肩袍,我又懷著滿懷的好心情,踏著晨曦婚惫,我來到了寧靜的校園里氛赐。來到班中,我看見許多同學(xué)都在認認真真的讀著英語...
    yingying_b574閱讀 123評論 0 2