vue商品列表滚动效果_Vue仿京东移动端web版商品详情页滚动样式

1

2

3

4

5

6

7

8

Document

9

10

11

12

13

14

15

16

17

18 @click="onScrollGoods">商品

19

20 @click="onScrollComment">评价

21

22 @click="onScrollRecommend">推荐

23

24 @click="onScrollDetail">详情

25

26

27

28

29

30

31

我是商品标题

32

我是商品价格

33

其他

34

35

---

36

37

38

精选评价

39

40

张若虚 2019-10-{{item}}

41

春江潮水连海平，海上明月共潮生。

42

43

44

---

45

46

47

猜你喜欢

48

49

50

---

51

52

53

54

我是商品详情55

56

57

58

59

60

61

客服

62

店铺

63

购物车

64

加入购物车

65

立即购买

66

67

68

69

70

71 var vm = newVue({72 el: '#app',73 data: {74 scrollTop: 0,75 opacity: 0,76 active: 'goods',77

78 },79 //绑定滚动事件

80 mounted() {81 window.addEventListener('scroll', this.handleScroll);82 },83 methods: {84 //监听页面滚动

85 handleScroll() {86 //获取当前的滚动距离

87 var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop88 //console.log(scrollTop)

89

90 if (scrollTop < 200) {91 //当滚动距离小于200时，计算导航透明度，可以考虑修改为每20增加0.1

92 //this.opacity = (scrollTop / 200).toFixed(1);

93 this.opacity = scrollTop / 200;94 this.active = 'goods';95 return

96 } else{97 this.opacity = 1

98 }99 //当滚动距离不小于200时，获取三个部分的顶部位置-45。

100 let commentTop = this.$refs.comment.offsetTop - 45;101 let recommendTop = this.$refs.recommend.offsetTop - 45;102 let detailTop = this.$refs.detail.offsetTop - 45;103 //计算滚动距离在哪个区间，修改this.active对应的样式名

104 if (scrollTop < commentTop) { if (this.active != 'goods') this.active = 'goods'; }105 else if (scrollTop >= commentTop && scrollTop < recommendTop) { if (this.active != 'comment') this.active = 'comment'; }106 else if (scrollTop >= recommendTop && scrollTop < detailTop) { if (this.active != 'recommend') this.active = 'recommend'; }107 else if (scrollTop >= detailTop) { if (this.active != 'detail') this.active = 'detail'; }108 },109

110 //点击导航栏第一个商品选项卡时，直接滚动到0

111 onScrollGoods() {112 //document.documentElement.scrollTop = 0;

113 window.scrollTo({top: 0, behavior: "smooth"});114 },115 //点击导航栏其他选项卡时，直接滚动到对应ref的offsetTop-45(导航栏高度)

116 onScrollComment() {117 if (!this.opacity) return;118 window.scrollTo({top: this.$refs.comment.offsetTop - 45, behavior: "smooth"});119 },120 onScrollRecommend() {121 if (!this.opacity) return;122 window.scrollTo({top: this.$refs.recommend.offsetTop - 45, behavior: "smooth"});123 },124 onScrollDetail() {125 if (!this.opacity) return;126 //document.documentElement.scrollTop = this.$refs.detail.offsetTop - 45;

127 //behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant

128 window.scrollTo({top: this.$refs.detail.offsetTop - 45, behavior: "smooth"});129

130 },131 },132 })133

134

135 body {136 margin: 0;137 }138 a {139 text-decoration: none;140 color: #252525;141 -webkit-tap-highlight-color:transparent;142 }143

144 #app{145 margin: 05px;146 }147 .nav {148 height: 45px;149 width: 100%;150 background-color: #fff;151 position: fixed;152 z-index: 99;153 opacity: 999;154 }155

156 .detail_anchor {157 display: -webkit-box;158 display: -webkit-flex;159 display: flex;160 height: 44px;161 line-height: 44px;162 font-size: 14px;163 color: #666;164 box-shadow: 0 1px 6px rgba(0, 0, 0, .1);165 justify-content: space-evenly;166 }167

168 .header-new-title {169 margin: 070px;170 height: 44px;171 font-size: 16px;172 line-height: 44px;173 text-align: center;174 color: #333;175 overflow: hidden;176 text-overflow: ellipsis;177 white-space: nowrap;178 }179

180 .active {181 color: #e4393c;182 }183

184 .de_btn_bar{185 height: 50px;186 width: 100%;187 background-color: #fff;188 position: fixed;189 z-index: 99;190 bottom: 0;191 }192 .btn_group{193 /*display: flex;194 justify-content: space-evenly;*/

195 height: 100%;196 }197 .btn_group_item{198 display: inline-block;199 height: 100%;200 width: 25%;201 margin-right: -5px;202 padding: 0;203 text-align: center;204 line-height: 50px;205 }206 .add_cart{207 color: #fff;208 background: linear-gradient(138deg,#ffa600,#ffb000 77%,#ffbc00);209 }210 .now_buy{211 color: #fff;212 background: linear-gradient(-41deg,#ff4f18,#ff2000 24%,#f10000);213 }214

215

216

217

218