回复
#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果 原创
凌晨2点
发布于 2024-8-4 13:47
浏览
0收藏
打开买菜软件正准备抢购一批高（打）端（折）菜品，忽然发现叮咚买菜商品banner竟然更新了！
身为对前沿技术有追求的程序员，立马打算复刻一下
首先介绍什么是banner
商品详情 banner（横幅广告）是指在电子商务网站或应用的商品详情页面上展示的横幅广告。这种类型的横幅通常用于展示商品的详细信息、促销活动、特色功能或者其他相关信息。商品详情 banner 的目的是为了吸引顾客的注意力，促进商品的销售。
商品详情 banner 的特点
视觉吸引力：通常使用高质量的图片和吸引人的设计来吸引顾客的注意。
信息传递：可以包含商品的主要卖点、优惠信息、促销活动等关键信息。
互动性：有时会加入互动元素，如滑动查看多张图片、点击放大查看细节等。
链接到购买：通常会有一个明显的按钮或链接，引导顾客进行购买操作。
商品详情 banner 的用途
展示商品特征：通过图片和文字突出商品的独特卖点。
促销活动：宣传限时折扣、赠品、捆绑销售等促销活动。
引导购物：通过明确的 CTA（Call To Action，行动号召）按钮，如“立即购买”、“加入购物车”，鼓励顾客下单。
品牌宣传：加强品牌的视觉识别，提高品牌认知度。
我们要实现的效果
传统banner效果
可以看到我们banner底部中间有页签和评价两个模块当我们的页签到达最大值，再继续进行切换，我们就需要切换到评价模块
那么要在鸿蒙中实现这种效果我们要使用哪些技术呢？
1. 首先就是模块的切换，我们可以使用tabs ，左侧模块我们使用swiper，右侧模块简单的自定义布局
2. 对tabs的页签进行处理，展示我们banner的下标，当达到最大数时，swiper的切换带动tabs的切换事件
Tabs结构如下
模块的切换
实现效果如下
首先我们定义了tabs并且修改页签中的数据（代码如下）
@Builder tabBuilder(index: number, name: string) {
Column() {
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
.margin({ top: 17, bottom: 7 })
}.width('30%')
}
build() {
Column() {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}.tabBar(this.tabBuilder(0, this.currentIndex+"/"+this.txtList.length))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
评价'))
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.animationDuration(400)
.barPosition(BarPosition.End)
.onChange((index: number) => {
this.currentIndex = index
})
.width(360)
.height(296)
.margin({ top: 52 })
.backgroundColor('#F1F3F5')
}
}这时候我们的swiper 就初具雏形了
但是我们想要的效果里并没有中间的圆点指示器
所以我们需要在第一个页签的tabContent中加入swiper 并且屏蔽掉小圆点。
敲黑板！！！！
通过 indicator(false)来屏蔽
添加过属性后我们的swiper效果如下
可以看到圆点指示器已经消失了
然后我们开始对tabs 的 页签进行嵌入
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
TabContent() {
Column(){
Swiper(){
ForEach(this.txtList, (item: string) => {
Text(item.toString())
.width('100%')
.height(160)
.backgroundColor(0xAFEEEE)
.textAlign(TextAlign.Center)
.fontSize(30)
.borderRadius(10)
})
}
.loop(false)
.indicator(false)
.height('100%')
.onChange((index: number) => {
this.swpIndex=index+1
})
}.width('100%').height('100%')
}.tabBar(this.tabBuilder(0, this.swpIndex+"/"+this.txtList.length))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}.tabBar(this.tabBuilder(1, '评价'))
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.animationDuration(400)
.barPosition(BarPosition.End)我们通过嵌入swiper 和一个空页面在ui显示上已经得到如下页面
现在已经非常接近了
现在我们只需要处理好当swiper滑动到最大值的时候，tabs的切换逻辑就可以实现我们想要的效果，这时候我们需要在swiper上使用onTouch 方法，来监听触摸事件（代码如下）
onTouch((event?: TouchEvent) => {
if(event){
if (event.type === TouchType.Down) {
this.eventType = 'Down'
this.movePos=event.touches[0].x
}
if (event.type === TouchType.Up) {
this.eventType = 'Up'
this.moveLeft=event.touches[0].x
if(this.swpIndex==this.txtList.length){
if (this.movePos-this.moveLeft>120) {
this.controller.changeIndex(1)
}
}
}
if (event.type === TouchType.Move) {
this.eventType = 'Move'
}
}
})分别对 按下（down）、 抬起（up） 、滑动（move）这三种状态进行监听，然后通过controller.changeIndex(tabs下标) 方法来控制tabs的切换，就是先我们想要的效果啦。
最终实现效果如下
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
已于2024-8-5 13:11:13修改
赞
收藏
回复
相关推荐
