scroll-fold-nav.uvue 4.6 KB
Newer Older
1 2 3
<template>
  <scroll-view @scroll="onScroll" class="page" show-scrollbar="false">
    <view ref="seatbar" class="seatbar"></view>
雪洛's avatar
雪洛 已提交
4 5 6 7 8 9 10 11 12 13 14 15 16

    <view class="content">
      <view class="content-item">
        <text class="text">1. 当前示例监听了 scroll-view 的 scroll 事件 ,滚动页面实时监听scrollTop。</text>
        <text class="text">2. 使用 ref 直接获取元素的节点,并在 scroll 事件中通过节点的 setProperty
          方法来修改搜索导航栏的高度、位置和背景颜色等样式,从而达到滚动折叠的效果。</text>
        <text class="text">3. 请向上\向下滚动页面观察效果。</text>
      </view>
      <view class="content-item" v-for="(item,index) in 20" :key="index">
        <text class="text">content-{{item}}</text>
      </view>
    </view>

17 18 19 20
    <view ref="navigatorbar" class="navigatorbar">
      <view class="titlebar">
        <view class="backview" @tap="back">
          <image class="back" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
雪洛's avatar
雪洛 已提交
21
        </view>
22
        <text ref="title" class="title">DCloud 为开发者而生</text>
雪洛's avatar
雪洛 已提交
23
      </view>
24 25 26 27 28 29 30 31 32
      <view ref="searchbar" class="searchbar" @tap="search">
        <image class="searchimg" src="/static/template/scroll-fold-nav/search.png" mode="widthFix"></image>
        <text class="searchinput">请输入你要搜索的内容</text>
        <text class="searchbutton">搜索</text>
      </view>
    </view>
  </scroll-view>
</template>

雪洛's avatar
雪洛 已提交
33
<script>
34 35 36 37 38 39 40 41
  //导航栏高度
  const NAVIBARHEIGHT = 88;
  //搜索栏高度
  const SEARCHBARHEIGHT = 40;
  //返回键按钮宽度
  const BACKWIDTH = 32;
  export default {
    data() {
雪洛's avatar
雪洛 已提交
42
      return {
43 44 45 46 47 48
        statusBarHeight: 0,
        nviBarHeight: 0,
        naviElement: null as UniElement | null,
        titleElement: null as UniElement | null,
        searchElement: null as UniElement | null
      }
雪洛's avatar
雪洛 已提交
49
    },
50 51 52 53 54 55
    onLoad() {
      // #ifdef APP
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
      // #endif
      this.nviBarHeight = NAVIBARHEIGHT + this.statusBarHeight;
    },
雪洛's avatar
雪洛 已提交
56
    onReady() {
57 58 59 60 61 62 63 64 65
      this.naviElement = this.$refs['navigatorbar'] as UniElement;
      this.searchElement = this.$refs['searchbar'] as UniElement;
      this.titleElement = this.$refs['title'] as UniElement;
      //适配不同状态栏高度
      this.naviElement?.style?.setProperty('padding-top', this.statusBarHeight+'px');
      this.naviElement?.style?.setProperty('height', (NAVIBARHEIGHT+this.statusBarHeight)+'px');
      let seatElement = this.$refs['seatbar'] as UniElement;
      seatElement.style.setProperty('height', (NAVIBARHEIGHT+this.statusBarHeight)+'px');
    },
雪洛's avatar
雪洛 已提交
66 67
    methods: {
      onScroll(e : ScrollEvent) {
68
        let offset = e.detail.scrollTop>SEARCHBARHEIGHT?SEARCHBARHEIGHT:e.detail.scrollTop;//(e.detail.scrollTop<0?0:e.detail.scrollTop)
69 70
        this.naviElement?.style?.setProperty('height', (this.nviBarHeight -offset)+'px');
        this.titleElement?.style?.setProperty('opacity', (1-offset/SEARCHBARHEIGHT));
71
        this.searchElement?.style?.setProperty('left', ((offset<0)?0:BACKWIDTH*offset/SEARCHBARHEIGHT)+'px');
雪洛's avatar
雪洛 已提交
72 73
      },
      back() {
74
        uni.navigateBack();
雪洛's avatar
雪洛 已提交
75
      },
76
      search() {
雪洛's avatar
雪洛 已提交
77 78 79 80
        uni.showToast({
          title: '暂不支持',
          icon: 'none'
        });
81 82 83 84 85
      }
    }
  }
</script>

雪洛's avatar
雪洛 已提交
86
<style>
87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174
.page {
  flex: 1;
  background-color: #f5f5f5;
}
.navigatorbar {
  position: fixed;
/* #ifdef APP */
  padding-top: 35px;
  height: 124px;
/* #endif */
/* #ifdef WEB */
  height: 88px;
/* #endif */
  border-bottom: 1px solid #efefef;
  width: 100%;
  background-color: #f5f5f5;
}
.titlebar {
  flex-direction: row;
  align-items: center;
  height: 44px;
}
.backview {
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
}
.back {
  width: 20px;
}
.title {
  margin: 0px 2px;
}
.searchbar {
  position: absolute;
  bottom: 2px;
  left: 0px;
  right: 0px;
  background-color: #FFFFFF;
  border: 1px solid #fbdf0d;
  height: 32px;
  border-radius: 100px;
  margin: 6px 12px;
  padding: 8px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.searchimg {
  width: 15px;
}
.searchinput {
  flex-grow: 1;
  font-size: 12px;
  color: #666;
}
.searchbutton {
  font-size: 12px;
  background-color: #ff6900;
  color: #FFF;
  padding: 5px 8px;
  border-radius: 100px;
}
.seatbar {
/* #ifdef APP */
  height: 124px;
/* #endif */
/* #ifdef WEB */
  height: 88px;
/* #endif */
}
.content {
  padding: 5px 15px;
}
.content-item {
  padding: 15px;
  margin: 5px 0;
  background-color: #fff;
  border-radius: 5px;
}
.text {
  font-size: 14px;
  color: #666;
  line-height: 20px;
}

</style>