0
点赞
收藏
分享

微信扫一扫

uni-app插件市场的GoodsNav 商品导航插件如何实现高亮和固定底部?

千行 2021-09-23 阅读 138
uni-app

1.店铺关注高亮逻辑处理



官方文档也没有给出如何实现收藏店铺后高亮的效果。

然后我实现的效果是这样的,因为给出的是字体图标,所以只能当字体颜色进行修改。



此外还要处理关注店铺时高亮,取消店铺时恢复原色(有一些逻辑小bug)。



完整代码:

<view class="goods_nav">
    <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
</view>
------------------------------------------------------------------------------------
import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
------------------------------------------------------------------------------------
data(){
    options: [{
    icon: 'shop',
    text: '店铺',     
    }],
}
methods: {
            onClick(e) {
                if (e.index == 1) {//用户点击了店铺
                    uni.showModal({
                        title: '提示',
                        content: '关注此店铺',
                        success(res) {
                            if (res.confirm) {
                                let uni_icons = document.getElementsByClassName('uni-icons')
                                uni_icons[1].style.color = 'red'
                                let text = document.getElementsByClassName('uni-tab__text')
                                text[1].style.color = 'red'
                            } else if (res.cancel) { //取消店铺和不关注店铺都恢复默认的颜色
                                console.log('用户点击取消');
                                uni.showModal({
                                    title:'温馨提示',
                                    content:'不再关注此店铺吗?',
                                    showCancel:false,
                                    success(res) {
                                        if(res.confirm){
                                            let uni_icons = document.getElementsByClassName('uni-icons')
                                            uni_icons[1].style.color = '#646566'
                                            let text = document.getElementsByClassName('uni-tab__text')
                                            text[1].style.color = '#646566'
                                        }
                                    }
                                })
                            }
                        }
                    })

                }
            },
------------------------------------------------------------------------------------
导航置底

.goods_nav {
            position: fixed;
            bottom: 0;
            width: 100%;
        }

2.购物车逻辑处理
处理一件商品只能加入一次购物车,不能无限点击。

            buttonClick(e) {
                if(e.index==0){//如果点击的是购物车的button
                    this.options[2].info++
                    if(this.options[2].info>1){//处理一件商品只能加入一次购物车,不能无限点击
                        this.options[2].info=1
                    }
                }else {//立即购买按钮
                    uni.switchTab({//跳转至购物车页面
                        url:'/pages/cart/cart'
                    })
                }
                
            }
举报

相关推荐

0 条评论