旅游玩乐 业务组件 UI 交互

旅游玩乐 业务组件 UI 交互

旅游业务组件

ctrip

PC web

https://piao.ctrip.com/dest/t4651499.html

M web

https://m.ctrip.com/webapp/you/gspoi/sight/0/4651499.html?seo=0

1. 相册 / video

https://m.ctrip.com/webapp/you/gspoi/sight/photos/2/r4651499.html?PoiId=52075446&Name=上海海昌海洋公园&coverImageId=undefined&from=https%3A%2F%2Fm.ctrip.com%2Fwebapp%2Fyou%2Fgspoi%2Fsight%2F0%2F4651499.html%3Fseo%3D0

https://vodlnr6niz5.vod.126.net/vodlnr6niz5/5d8c7d0d-385f-463e-8a96-e62095f6e7fe.mp4

1. poi

https://m.ctrip.com/webapp/you/map/2/poi-4651499-sight.html

1. 吸顶、tab 锚点

Service Worker

            ;try {
                if (!window.__bfi) {
                    window.__bfi = [];
                }
                ;if (navigator.serviceWorker) {
                    var isUnregister = false;
                    var runEnv = "prod";
                    var vd = '/webapp/you';
                    var _sendSWUbt = function(status) {
                        window["__bfi"].push(['_trackMetric', {
                            name: "104047",
                            value: 1,
                            tag: {
                                vd: vd,
                                status: status
                            }
                        }]);
                    };
                    if (window.location.search.indexOf("closeSW=1") !== -1) {
                        isUnregister = true;
                    }
                    ;if (!isUnregister) {
                        if (window.location.hostname.indexOf("localhost") != -1) {
                            runEnv = "local"
                        }
                        ;var swSrc = '/webapp/you/nfes/serviceworker/sw.js?v=2020_3_13' + "&isSupportWebP=" + !!(window.nfes_isSupportWebP) + "&runEnv=" + runEnv;
                        window.addEventListener('load', function() {
                            navigator.serviceWorker.register(swSrc, {
                                scope: vd
                            }).then(function() {
                                _sendSWUbt("success");
                                console.log("servicewoker done!");
                            }).catch(function(error) {
                                _sendSWUbt("fail");
                                console.log('sorry', error);
                            });
                        });
                    } else {
                        navigator.serviceWorker.getRegistrations().then(function(rs) {
                            for (var i = 0; i < rs.length; i++) {
                                var r = rs[i];
                                var scop = r.scope;
                                if (new RegExp(vd + "$").test(scop)) {
                                    _sendSWUbt("unregister");
                                    r.unregister()
                                }
                            }
                        }).catch(function(err) {
                            console.log('Service Worker registration failed: ', err);
                        });
                    }
                }
            } catch (e) {}

1. cards 瀑布流布局

https://m.ctrip.com/webapp/you/tripshoot/paipai/poiPage/poiHome?poiId=52075446&poiType=3&isHideHeader=true&isHideNavBar=YES&seo=0

meituan

https://sh.meituan.com/s/海昌海洋公园门票/

http://i.meituan.com/s/-海昌海洋公园/

驴妈妈旅游

PC

http://www.lvmama.com/

M

https://m.lvmama.com/

https://m.lvmama.com/tour/ticket?keyword=上海海昌海洋公园主题度假酒店&homeSearch=1&hideAppHeader=1

---

---