引入插件后? ?頁面首次加載時不會出現滾動條display：none? 重新刷新頁面后才能出現滾動條? 這是什么原因？?

源碼如下? ?省略了插件。。。

<style lang="less"> @import "./framework.less"; .ivu-select-dropdown { border-radius: 0; } </style>

<template> <div class="framework">
<!-- 框架頭部 開始 --> <div class="framework-header"> <!-- logo --> <div class="header-left"> <img src="../images/logo.svg"></img> </div> <!-- 面包屑 --> <div class="header-middle"> <breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav> </div>
<!-- 左側內容 --> <div class="header-right">
<!-- <hr-search :searchItem="searchItem"></hr-search> --> <sea></sea> <!-- <Icon type="location" style="width:20px; height:20px;"></Icon> --> <full-screen v-model="isFullScreen" @on-change="fullscreenChange"></full-screen> <lock-screen></lock-screen> <message-tip v-model="mesCount"></message-tip>
<div class="user-dropdown-menu-con"> <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon"> <Dropdown trigger="click" @on-click="handleClickUserDropdown"> <a href="javascript:void(0)"> <span class="main-user-name">{{ name }}</span> <Icon type="arrow-down-b"></Icon> </a> <DropdownMenu slot="list"> <DropdownItem name="ownSpace">個人中心</DropdownItem> <DropdownItem name="loginout" divided>退出登錄</DropdownItem> </DropdownMenu> </Dropdown> <Avatar :src="avatorPath" style="background: #619fe7;margin-left: 10px;"></Avatar> </Row> </div>
</div>
</div> <!-- 框架頭部 結束 -->
<!-- 左邊菜單欄 開始 --> <div class="framework-sider" :style="{width: shrink?'60px':'200px', overflow: shrink ? 'visible' : 'hidden'}"> <div class="navicon-con"> <Button type="text" @click="toggleClick" :style="{transform: 'rotateZ(' + (this.shrink ? '-90' : '0') + 'deg)'}"> <Icon type="navicon" size="28"></Icon> </Button> </div>


<hr-shrinkable-menu class="shinkable-menu" :shrink="shrink" :menuList="menuList" :icon-size="14" :open-names="openedSubmenuArr" @on-change="handleSubmenuChange"></hr-shrinkable-menu> </div> <!-- 左邊菜單欄 結束 -->
<div class="framework-tags" :style="{left: shrink?'60px':'200px'}"> <hr-top-tags :pageTagsList="pageTagsList"></hr-top-tags> </div>
<!-- 內容 開始 --> <div class="framework-content" :style="{left: shrink?'60px':'200px'}" data-role='page'> <div class="single-page"> <keep-alive :include="cachePage"> <router-view></router-view> </keep-alive> </div> </div> <!-- 內容 結束 --> </div> </template>
<script> import util from "@/libs/util.js"; import breadcrumbNav from "@/hr-components/breadcrumb/breadcrumb-nav.vue"; import shrinkableMenu from "@/hr-components/menu/hr-shrinkable-menu.vue"; import fullScreen from "@/hr-components/full-screen/fullscreen.vue"; import topTags from "@/hr-components/tags-opened/hr-top-tags.vue"; import lockScreen from "@/hr-components/lockscreen/lockscreen.vue"; import hrSearch from "@/hr-components/search/search.vue"; import sea from "@/hr-components/search/sea.vue"; import messageTip from "@/hr-components/message-tip/message-tip.vue"; import Cookies from "js-cookie"; import http from "@/libs/http"; import api from "@/libs/api";
export default { components: { breadcrumbNav, "hr-shrinkable-menu": shrinkableMenu, "hr-top-tags": topTags, fullScreen, lockScreen, messageTip, "hr-search": hrSearch, sea }, data() { return { shrink: false, openedSubmenuArr: this.$store.state.app.openedSubmenuArr, isFullScreen: false, name: "", avatorPath: "", searchItem: "" }; }, computed: { menuList() { return this.$store.state.app.menuList; }, currentPath() { return this.$store.state.app.currentPath; // 當前面包屑數組 }, pageTagsList() { return this.$store.state.app.pageOpenedList; // 打開的頁面的頁面對象 },
//頁面緩存 cachePage() { return this.$store.state.app.cachePage; }, mesCount() { return this.$store.state.app.messageCount; } }, mounted() { this.init(); this.changeScroll(); const ws = new WebSocket("ws://192.168.199.107:8090/test"); const _this = this; ws.onmessage = function(msg) { _this.$Notice.open({ title: "Notification title", desc: msg.data, duration: 2 }); }; }, methods: { changeScroll() { $(".framework-content").niceScroll({ cursorcolor: "#FFFF00", // 改變滾動條顏色，使用16進制顏色值 cursoropacitymin: 0, // 當滾動條是隱藏狀態時改變透明度, 值范圍 1 到 0 cursoropacitymax: 1, // 當滾動條是顯示狀態時改變透明度, 值范圍 1 到 0 cursorwidth: "8px", // 滾動條的寬度，單位：便素 cursorborder: "1px solid #fff", // CSS方式定義滾動條邊框 cursorborderradius: "0px", // 滾動條圓角（像素） horizrailenabled: false, autohidemode: "scroll" }); }, changeScroll1() { $(".framework-sider").niceScroll({ cursorcolor: "#000000", // 改變滾動條顏色，使用16進制顏色值 cursoropacitymin: 0, // 當滾動條是隱藏狀態時改變透明度, 值范圍 1 到 0 cursoropacitymax: 1, // 當滾動條是顯示狀態時改變透明度, 值范圍 1 到 0 cursorwidth: "8px", // 滾動條的寬度，單位：便素 cursorborder: "1px solid #fff", // CSS方式定義滾動條邊框 cursorborderradius: "0px", // 滾動條圓角（像素） autohidemode: "scroll", horizrailenabled: false, railpadding: { top: 50, right: 0, left: 0, bottom: 0 } }); }, // changeScroll(){ // debugger // $(".").niceScroll(); // }, init() { this.changeScroll(); this.changeScroll1(); this.getHeadUrl(); let pathArr = util.setCurrentPath(this, this.$route.name); this.$store.commit("updateMenulist");
//判斷是否有二級菜單，如果是，那么就記錄打開的菜單路由 if (pathArr.length >= 2) { this.$store.commit("addOpenSubmenu", pathArr[1].name); } this.name = Cookies.get("name"); this.checkTag(this.$route.name); }, async getHeadUrl() { let params = {}; if (Cookies.get("head")) { params.picture = Cookies.get("head"); const res = await http.get(api.getPictureUrl, params); if (res.code === 200) { this.avatorPath = res.data; } else { this.avatorPath = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg"; } } else { this.avatorPath = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg"; } }, handleClickUserDropdown(name) { if (name === "ownSpace") { util.openNewPage(this, "ownspace_index"); this.$router.push({ name: "ownspace_index" }); } else if (name === "loginout") { // 退出登錄 this.$store.commit("logout", this); this.$store.commit("clearOpenedSubmenu"); this.$router.push({ name: "login" }); } }, handleSubmenuChange(val) { // this.$Message.success(val); this.changeScroll(); this.changeScroll1(); console.log(val); }, toggleClick() { this.shrink = !this.shrink; }, checkTag(name) { let openpageHasTag = this.pageTagsList.some(item => { if (item.name === name) { return true; } }); if (!openpageHasTag) { // 解決關閉當前標簽后再點擊回退按鈕會退到當前頁時沒有標簽的問題 util.openNewPage( this, name, this.$route.params || {}, this.$route.query || {} ); } }, fullscreenChange(isFullScreen) { console.log(isFullScreen); } }, watch: { $route(to) { this.$store.commit("setCurrentPageName", to.name); let pathArr = util.setCurrentPath(this, to.name);
if (pathArr.length > 2) { this.$store.commit("addOpenSubmenu", pathArr[1].name); } this.checkTag(to.name); } }, created() { // 顯示打開的頁面的列表 this.$store.commit("setOpenedList"); } }; </script>

? ? ?

轉載于:https://www.cnblogs.com/wangyage/p/8953155.html

總結

以上是生活随笔為你收集整理的问题贴 jQuery插件nicescroll问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。