|
|
@@ -1,136 +1,159 @@
|
|
|
-<!-- 预加载，提升优先级 -->
|
|
|
-<!-- <link rel="preload" as="style" href="//cdn-common.jianyu360.com/cdn/assets/iconfont/mobile/23.8.15/iconfont.css"> -->
|
|
|
-<link rel="preload" as="script" href="//cdn-common.jianyu360.com/cdn/lib/vue/2.7.14/vue.min.js">
|
|
|
-<link rel="preload" as="script" href="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js">
|
|
|
-<link rel="preload" as="script" href="//cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js">
|
|
|
-
|
|
|
-<link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css />
|
|
|
-<style>
|
|
|
- [v-cloak] {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
- #tabMesg .van-tabbar {
|
|
|
- height: 1rem;
|
|
|
- }
|
|
|
- #tabMesg .van-tabbar-item {
|
|
|
- font-size: .24rem;
|
|
|
- }
|
|
|
- #tabMesg .van-tabbar-item__icon img {
|
|
|
- width: .48rem;
|
|
|
- height: .48rem;
|
|
|
- }
|
|
|
- #tabMesg .van-tabbar-item .van-tabbar-item__icon .van-info {
|
|
|
- margin-top: .12rem;
|
|
|
- background: #FB483D;
|
|
|
- }
|
|
|
- #tabMesg .a-badge .van-tabbar-item__icon .van-info{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .app-layout-content-b {
|
|
|
- bottom: 1rem;
|
|
|
- }
|
|
|
-</style>
|
|
|
-
|
|
|
-<div id="tabMesg" v-cloak>
|
|
|
- <van-tabbar v-model="tabActive" active-color="#2ABED1" inactive-color="#171826">
|
|
|
- <van-tabbar-item v-for="(item, index) in tabList" :key="index" badge="" replace :url="item.url">
|
|
|
- <span>{item.label}</span>
|
|
|
- <template #icon="props">
|
|
|
- <img v-show="!props.active" :src="'/jyapp/images/tabbar/' + item.icon + '.png'" />
|
|
|
- <img v-show="props.active" :src="'/jyapp/images/tabbar/' + item.icon + '_active.png'" />
|
|
|
- </template>
|
|
|
- </van-tabbar-item>
|
|
|
- </van-tabbar>
|
|
|
+<link rel="stylesheet" href=/jyapp/css/tabbar.css />
|
|
|
+<div id="tabbar-container">
|
|
|
+ <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
|
|
|
+ <div class="van-tabbar-item" name="search">
|
|
|
+ <div class="van-tabbar-item__icon">
|
|
|
+ <img class="tabbar-img" src="/jyapp/images/tabbar/home.png" />
|
|
|
+ <img class="tabbar-img-active" src="/jyapp/images/tabbar/home_active.png" />
|
|
|
+ </div>
|
|
|
+ <div class="van-tabbar-item__text">首页</div>
|
|
|
+ </div>
|
|
|
+ <div class="van-tabbar-item" name="subscribe">
|
|
|
+ <div class="van-tabbar-item__icon">
|
|
|
+ <img class="tabbar-img" src="/jyapp/images/tabbar/book.png" />
|
|
|
+ <img class="tabbar-img-active" src="/jyapp/images/tabbar/book_active.png" />
|
|
|
+ </div>
|
|
|
+ <div class="van-tabbar-item__text">订阅</div>
|
|
|
+ </div>
|
|
|
+ <div class="van-tabbar-item" name="box">
|
|
|
+ <div class="van-tabbar-item__icon">
|
|
|
+ <img class="tabbar-img" src="/jyapp/images/tabbar/box.png" />
|
|
|
+ <img class="tabbar-img-active" src="/jyapp/images/tabbar/box_active.png" />
|
|
|
+ </div>
|
|
|
+ <div class="van-tabbar-item__text">百宝箱</div>
|
|
|
+ </div>
|
|
|
+ <div class="van-tabbar-item" name="me">
|
|
|
+ <div class="van-tabbar-item__icon">
|
|
|
+ <img class="tabbar-img" src="/jyapp/images/tabbar/mine.png" />
|
|
|
+ <img class="tabbar-img-active" src="/jyapp/images/tabbar/mine_active.png" />
|
|
|
+ </div>
|
|
|
+ <div class="van-tabbar-item__text">我的</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-<script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js></script>
|
|
|
-<script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js></script>
|
|
|
<script src=//cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js></script>
|
|
|
<script>
|
|
|
-var tabbar = new Vue({
|
|
|
- el: '#tabMesg',
|
|
|
- delimiters: ['{', '}'],
|
|
|
- data: function () {
|
|
|
- return {
|
|
|
- tabActive: 0,
|
|
|
- tabList: [
|
|
|
- {
|
|
|
- label: '首页',
|
|
|
- icon: 'home',
|
|
|
- url: '/jyapp/jylab/mainSearch',
|
|
|
- alias: ['/jy_mobile/tabbar/home'],
|
|
|
- },
|
|
|
- {
|
|
|
- label: '订阅',
|
|
|
- icon: 'book',
|
|
|
- url: '/jyapp/swordfish/historypush',
|
|
|
- alias: ['/jy_mobile/tabbar/subscribe'],
|
|
|
- },
|
|
|
- // {
|
|
|
- // label: '消息',
|
|
|
- // icon: 'mesg',
|
|
|
- // url: '/jyapp/frontPage/messageCenter/sess/index',
|
|
|
- // index: 2
|
|
|
- // },
|
|
|
- {
|
|
|
- label: '百宝箱',
|
|
|
- icon: 'box',
|
|
|
- url: '/jyapp/jylab/index',
|
|
|
- alias: ['/jy_mobile/tabbar/box'],
|
|
|
- },
|
|
|
- {
|
|
|
- label: '我的',
|
|
|
- icon: 'mine',
|
|
|
- url: '/jyapp/free/me',
|
|
|
- alias: ['/jy_mobile/tabbar/me'],
|
|
|
- },
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- activeTab: function () {
|
|
|
- return this.tabList[this.tabActive] || {}
|
|
|
+var tabbar = {
|
|
|
+ $el: null,
|
|
|
+ tabList: [
|
|
|
+ {
|
|
|
+ label: "首页",
|
|
|
+ name: "search",
|
|
|
+ icon: "home",
|
|
|
+ url: "/jyapp/jylab/mainSearch",
|
|
|
+ alias: ["/jy_mobile/tabbar/home"],
|
|
|
},
|
|
|
- },
|
|
|
- mounted: function () {
|
|
|
- var pathname = location.pathname
|
|
|
- this.resetState()
|
|
|
- this.getTabActive(pathname)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //获取url中"?"符后的字符串并正则匹配
|
|
|
- getQueryString(name) {
|
|
|
- var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
|
- var r = window.location.search.substr(1).match(reg);
|
|
|
- var context = "";
|
|
|
- if (r != null)
|
|
|
- context = r[2];
|
|
|
- reg = null;
|
|
|
- r = null;
|
|
|
- return context == null || context == "" || context == "undefined" ? "" : context;
|
|
|
+ {
|
|
|
+ label: "订阅",
|
|
|
+ name: "subscribe",
|
|
|
+ icon: "book",
|
|
|
+ url: "/jyapp/swordfish/historypush",
|
|
|
+ alias: ["/jy_mobile/tabbar/subscribe"],
|
|
|
},
|
|
|
- resetState: function () {
|
|
|
- Object.assign(this.$data, this.$options.data())
|
|
|
+ {
|
|
|
+ label: "百宝箱",
|
|
|
+ name: 'box',
|
|
|
+ icon: "box",
|
|
|
+ url: "/jyapp/jylab/index",
|
|
|
+ alias: ["/jy_mobile/tabbar/box"],
|
|
|
},
|
|
|
- getTabActive: function (target) {
|
|
|
- var targetIndex = 0
|
|
|
- if (!target) {
|
|
|
- return this.tabActive = targetIndex
|
|
|
+ {
|
|
|
+ label: "我的",
|
|
|
+ name: 'me',
|
|
|
+ icon: "mine",
|
|
|
+ url: "/jyapp/free/me",
|
|
|
+ alias: ["/jy_mobile/tabbar/me"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ init: function () {
|
|
|
+ this.initDOM()
|
|
|
+ this.calcTabActive()
|
|
|
+ this.initEvents()
|
|
|
+ },
|
|
|
+ initDOM: function () {
|
|
|
+ this.$el = $('#tabbar-container')
|
|
|
+ },
|
|
|
+ //获取url中"?"符后的字符串并正则匹配
|
|
|
+ getQueryString: function (name) {
|
|
|
+ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
|
+ var r = window.location.search.substr(1).match(reg);
|
|
|
+ var context = "";
|
|
|
+ if (r != null) context = r[2];
|
|
|
+ reg = null;
|
|
|
+ r = null;
|
|
|
+ return context == null || context == "" || context == "undefined"
|
|
|
+ ? ""
|
|
|
+ : context;
|
|
|
+ },
|
|
|
+ initEvents: function () {
|
|
|
+ var _this = this
|
|
|
+ this.$el.on('click', '.van-tabbar-item:not(.van-tabbar-item--active)', function () {
|
|
|
+ var name = $(this).attr('name')
|
|
|
+ var s = _this.getTabWithName(name)
|
|
|
+ var tabInfo = s.tabInfo
|
|
|
+ if (tabInfo) {
|
|
|
+ var url = tabInfo.url
|
|
|
+ location.replace(url)
|
|
|
}
|
|
|
- var tabList = this.tabList
|
|
|
- var targetTab = null
|
|
|
-
|
|
|
- for (var i = 0; i < tabList.length; i++) {
|
|
|
- var urlMatch = tabList[i].url.indexOf(target) !== -1
|
|
|
- var aliasMatch = tabList[i].alias && tabList[i].alias.indexOf(target) !== -1
|
|
|
- if (urlMatch || aliasMatch) {
|
|
|
- targetTab = tabList[i]
|
|
|
- targetIndex = i
|
|
|
- break
|
|
|
- }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTabWithName: function (name) {
|
|
|
+ var index = -1
|
|
|
+ var tab = null
|
|
|
+ var tabList = this.tabList
|
|
|
+ for (var i = 0; i < tabList.length; i++) {
|
|
|
+ if (name === tabList[i].name) {
|
|
|
+ index = i
|
|
|
+ tab = tabList[i]
|
|
|
+ break
|
|
|
}
|
|
|
- this.tabActive = targetIndex
|
|
|
- console.log(targetTab, targetIndex)
|
|
|
- },
|
|
|
- }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ index: index,
|
|
|
+ tabInfo: tab
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getTabActiveWithPath: function (target) {
|
|
|
+ var targetIndex = 0;
|
|
|
+ if (!target) {
|
|
|
+ return {
|
|
|
+ index: targetIndex,
|
|
|
+ tabInfo: null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var tabList = this.tabList;
|
|
|
+ var targetTab = null;
|
|
|
+
|
|
|
+ for (var i = 0; i < tabList.length; i++) {
|
|
|
+ var urlMatch = tabList[i].url.indexOf(target) !== -1;
|
|
|
+ var aliasMatch = tabList[i].alias && tabList[i].alias.indexOf(target) !== -1;
|
|
|
+ if (urlMatch || aliasMatch) {
|
|
|
+ targetTab = tabList[i];
|
|
|
+ targetIndex = i;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ index: targetIndex,
|
|
|
+ tabInfo: targetTab
|
|
|
+ }
|
|
|
+ },
|
|
|
+ calcTabActive: function () {
|
|
|
+ var pathname = location.pathname;
|
|
|
+ var s = this.getTabActiveWithPath(pathname);
|
|
|
+ if (s) {
|
|
|
+ var tabInfo = s.tabInfo
|
|
|
+ var name = tabInfo.name
|
|
|
+ if (name) {
|
|
|
+ console.log($('.van-tabbar-item[name='+name+']'))
|
|
|
+ $('.van-tabbar-item[name='+name+']').addClass('van-tabbar-item--active').siblings().removeClass('van-tabbar-item--active')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+$(function () {
|
|
|
+ tabbar.init()
|
|
|
})
|
|
|
-</script>
|
|
|
+</script>
|
