Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案 - 逍遥云天

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案

h5返回监控

需求场景：

  • 非推荐商品详情页返回的时候弹出弹窗推荐商品，点击弹窗按钮可以直接访问推荐商品；

  • 只有直接进入商品详情页返回才会弹出推荐商品弹窗；

  • 每个用户访问只能弹一次（除非清除缓存）。

需求分析：

1. 判断是否直接进入商品详情页可以在商品详情页直接判断 history.length ，如果是则 history.length=2 ；

2. 每个用户只能弹一次可以保存一个标志值 hasBeenRecommended=true 到缓存中，有了这个标志值就不再弹出；

3. 返回的监控，还是要监听页面的popstate，如果要阻止原来的返回操作的话，就要给页面栈添加一个空栈：

history.pushState(null, null, document.URL);

实例代码：

1. vue框架内页面初始化时判断是否需要推荐弹窗：

......
//修改历史记录状态，需要放在商品数据初始化之后
if(history.length<=2 && !localStorage.getItem("hasBeenRecommended")) {
    //获取推荐数据信息，页面返回标识修改及页面栈加入空栈操作在判断非当前页面之后再进行                                    
    this.getRecommendGoodInfo();
}
......

注：

本例需要调用后端接口动态配置，可以在获取商品详情数据之后进行，也可以在页面初始化时查询商品详情时异步进行，这个影响不大，尽量不要在返回监听的逻辑中处理，如果推荐商品数据需要调用后端接口的话，还是放在页面初始化时处理比较好。

2. 获取推荐商品详情信息：   

        /**        
     * 获取推荐权益卡信息数据
     */
        getRecommendGoodInfo: function() {
            var self = this
            self.$ajax({
                method: \'post\',
                url: self.$utils.DOMIN + \'goods/getAdvert\',
            }).then((response) => {
                var data = response.data.d
                if(data && data.goodsId != self.$route.query.goodsId) {
                    //给页面添加空的页面栈，同时给推荐弹窗填充数据
                    history.pushState(null, null, document.URL);
                    //保存阻断返回的标志到缓存中
　　　　　　　　　　　　localStorage.setItem(\'stopBack\',true);
                    //填充弹窗元素数据源
                    self.recommendGoodInfo = data
                }
            }).catch(function(error) {
                console.log(error);
            });
        }

注：给页面添加空的页面栈的同时保存一个标志值到缓存中，那么在返回的时候如果有这个值就弹出弹窗，同时将这个值进行重置或清除。

3. 返回监控，在vue框架外围处理:

    /**
     * 返回监控，若缓存中返回标识为666，则弹出推荐权益卡弹窗，同时缓存中保存已经弹出推荐弹窗的标识
     */
    window.addEventListener("popstate", () => {
        if(localStorage.getItem("stopBack")) {
　　　　　　//使用jquery或原生js的方式是弹窗显示
            $(".showRecommendModal").fadeIn()
　　　　　　　　localStorage.removeItem(\'stopBack\')
            localStorage.setItem("hasBeenRecommended", true)
        }
    })

注：监听浏览器的返回本身就会破坏掉vue的路由，所以这个操作只能在vue框架外围来进行。如此，弹窗的数据是在vue框架中填充的，弹窗的显示是在原生js的返回监控中处理的。

后记：

整体来说，感觉上边的这种方案还是比较好的，当然如果喜欢原生js的话，也可以在vue框架中将推荐商品数据保存到缓存中，然后在返回监控的逻辑中以操作DOM的方式将弹窗追加到html结构中去，不过个人是不喜欢操作DOM的。

以上是 Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案 - 逍遥云天 的全部内容， 来源链接： utcz.com/z/379391.html

回到顶部