你是否也收到這樣的用戶反饋？
- 商品列表滾動區(qū)域太小，很難找到想要的商品。
- 頭部的搜索廣告占據(jù)了半個屏幕，擠占了實(shí)際空間。
- 在我手機(jī)這樣小的屏幕上，展示區(qū)域太小了，能否把它放大點(diǎn)？
在電商頁面中，我們需要向用戶展示眾多的商品、廣告等信息。
然而，如何在有限的屏幕空間中更好地展示它們，是一個需要我們深入思考的問題。
由于小程序 webview 渲染框架在技術(shù)存在一定的局限性，我們需要在不同的設(shè)計之間進(jìn)行抉擇。
- 當(dāng)廣告具有較高的優(yōu)先級時，我們會考慮突出廣告的展示，同時減小商品列表在界面中所占比例。
- 當(dāng)商品列表具有較高的優(yōu)先級時，我們會考慮優(yōu)先展示商品，而放棄廣告的展示。
但是當(dāng)廣告和商品列表同樣重要的情況下，要怎么辦呢？
常見的一種設(shè)計方式是設(shè)計一個隱藏按鈕，當(dāng)用戶不想看廣告的時候把廣告隱藏掉，隱藏之后商品列表就有更多展示空間
但是這種情況也只是針對愿意手動點(diǎn)擊隱藏按鈕的情況下，還是有一定的局限性。
那么，有沒有辦法做到在無形中隱藏廣告呢？
說到這里，當(dāng)然是可以的啦??
1、吸頂布局 + worklet 輕松實(shí)現(xiàn)
在常見的電商小程序首頁，通常是頂部展示類目、接著展示商品詳情，商品詳情頂部也有熱門等等的分類。
當(dāng)頁面滾動的時候，我們希望商品詳情熱門分類可以吸在頂部，便于切換。
這里我們用到了 scroll-view 的 sticky-header、sticky-section 吸頂布局容器即可輕松實(shí)現(xiàn)。
<scroll-view
type="custom"
scroll-y
show-scrollbar="{{false}}"
worklet:onstartstart="handleScrollStart"
worklet:onscrollupdate="handleScrollUpdate"
worklet:onscrollend="handleScrollEnd"
>
<sticky-section push-pinned-header="{{false}}">
<sticky-header>
<!-- 搜索框 -->
...
</sticky-header>
<!-- 類目展示 -->
</sticky-section>
<sticky-section push-pinned-header="{{false}}" padding="{{[0, 16, 0, 16]}}">
<sticky-header>
<!-- 商品詳情熱門分類 -->
...
</sticky-header>
<grid-view cross-axis-count="2" type="masonry">
<!-- 兩列的瀑布流 -->
...
</grid-view>
</sticky-section>
</scroll-view>
當(dāng) scroll-view 滾動的時候，根據(jù)滾動位置把搜索框放到標(biāo)題的位置，可以再節(jié)省一點(diǎn)空間
attached() {
// nav-bar 隱藏或展示
this.applyAnimatedStyle('.nav-bar', () => {
'worklet'
return {
opacity: this.navBarOpactiy.value
}
})
// 改變搜索框?qū)挾? this.applyAnimatedStyle('.search', () => {
'worklet'
return {
width: `${this.searchBarWidth.value}%`,
}
})
},
// scroll-view 監(jiān)聽函數(shù)
handleScrollUpdate(evt) {
'worklet'
const maxDistance = 60
const scrollTop = clamp(evt.detail.scrollTop, 0, maxDistance)
const progress = scrollTop / maxDistance
const EasingFn = Easing.cubicBezier(0.4, 0.0, 0.2, 1.0)
this.searchBarWidth.value = lerp(100, 70, EasingFn(progress))
this.navBarOpactiy.value = lerp(1, 0, progress)
},
2、手勢 + worklet 操作更靈活
小程序新渲染框架支持了手勢系統(tǒng)，手勢在這里可以發(fā)揮大作用～
我們可以使用手勢協(xié)商讓小程序頁面中的廣告、商品等無縫切換和更好的展示
// .wxml
<pan-gesture-handler
tag="pan"
simultaneousHandlers="{{['scroll-view']}}"
shouldResponseOnMove="shouldPanResponse"
onGestureEvent="handlePan"
>
<view class="page">
<vertical-drag-gesture-handler
tag="scroll-view"
native-view="scroll-view"
simultaneousHandlers="{{['pan']}}"
shouldResponseOnMove="shouldScrollViewResponse"
>
<scroll-view
class="product-list"
type="custom"
scroll-y
show-scrollbar="{{false}}"
adjustDecelerationVelocity="adjustDeceleration"
bindscroll="handleScroll"
>
...
</scroll-view>
</vertical-drag-gesture-handler>
</view>
</pan-gesture-handler>
// .js
handlePan(e) {
'worklet'
...
if (e.state === GestureState.ACTIVE) {
if (this._interactionState.value === InteractionState.UNFOLD) {
// 展開狀態(tài)下，往上滑才折疊起來
if (e.absoluteY - this._startY.value < 0) {
this._interactionState.value = InteractionState.ANIMATING
this._translY.value = timing(0.0, { duration: 250 }, () => {
'worklet'
this._interactionState.value = InteractionState.RESET
})
}
} else {
// 其它情況，跟隨手指滑動
this._translY.value = e.absoluteY - this._startY.value
}
}
// 其他狀態(tài)下的處理
...
},
加入手勢之后，除了可以隱藏廣告，我們還可以將一些頭部信息隱藏
在用戶查看商品列表時，隱藏大部分無用信息，將商品列表展示區(qū)域最大化
// 最外層 .page 往上挪
this.applyAnimatedStyle('.page', () => {
'worklet'
const translY = clamp(this._translY.value, -this._tabsTop.value, 0)
return {
transform: `translateY(${translY}px)`
}
})
// 改變 .navigation-bar 背景色
this.applyAnimatedStyle('.navigation-bar', () => {
'worklet'
const translY = clamp(this._translY.value, -this._tabsTop.value, 0)
const opacity = translY / -this._tabsTop.value
return {
backgroundColor: `rgba(255, 255, 255, ${opacity})`
}
})
// 輸入框：改變寬度并且展示
this.applyAnimatedStyle('.search-input', () => {
'worklet'
const translY = clamp(this._translY.value, -this._tabsTop.value, 0)
const percentage = translY / -this._tabsTop.value
return {
width: `${percentage * 60 + 40}%`,
opacity: percentage,
}
})
除此之外，我們這里可以利用手勢來展示商家的一些信息
當(dāng)在商品列表往下拉到頂部時，觸發(fā)整個列表下拉展示出商家信息
再往上滑動則商品列表重新展示～
// 商品詳情往下拉
this.applyAnimatedStyle('.main', () => {
'worklet'
const translY = clamp(this._translY.value, 0, Number.MAX_VALUE)
console.log(222, translY)
return {
transform: `translateY(${translY}px)`
}
})
// 簡單的 header 漸隱
// 商品詳情展示時，僅顯示簡單的 header：學(xué)堂名稱和幾個標(biāo)簽
this.applyAnimatedStyle('.header-shop-info-simple', () => {
'worklet'
const min = 50
const max = 100
const translY = clamp(this._translY.value, min, max) - min
return {
opacity: 1 - (translY / (max - min))
}
})
// 復(fù)雜的 header 漸顯
// 商品詳情下拉，顯示復(fù)雜 header：展示熱門活動、公告等等信息
this.applyAnimatedStyle('.header-shop-info-detail', () => {
'worklet'
const min = 100
const max = 150
const translY = clamp(this._translY.value, min, max) - min
return {
opacity: translY / (max - min)
}
})
加入手勢動畫之后，我們的頁面展示對比之前有了以下的優(yōu)勢：
- 更加自然：更符合用戶操作習(xí)慣，用戶自然滾動屏幕時不會感到突兀
- 更節(jié)省空間：滾動隱藏更為靈活、省空間，使頁面更清爽
- 更高效的展示：可以將要展示的內(nèi)容更好的展示，無需做取舍
借助手勢動畫，我們可以優(yōu)化小程序界面展示、提升用戶體驗(yàn)，從而獲得更高的商業(yè)價值。
如果你也想更好的留住用戶，mark 下這個 源碼 [ 瀑布流頁面 / 分類頁面 ] 直接接到到你的小程序吧～
