mui 側拉導航效果不能實作

<template>

  <div class="mui-off-canvas-wrap mui-draggable">

	    <!-- 主頁面容器 -->

	    <div class="mui-inner-wrap">

	        <!-- 選單容器 -->

	        <aside class="mui-off-canvas-left" id="offCanvasSide">

	            <div class="mui-scroll-wrapper">

	                <div class="mui-scroll">

	                    <!-- 選單具體展示內容 -->

						<span>Hammerrrr</span>

						<div class="vip">

							<p>已過期365天，我的VIP</p>

							<p>會員中心</p>

							<p>黑膠VIP首月僅需5元，點擊搶購</p>

						</div>

						<div class="my">

							<ul class="mui-table-view">

								<li class="mui-table-view-cell menu">

									<a class="mui-navigate-right">我的訊息</a>

								</li>

								<li class="mui-table-view-cell">

									<a class="mui-navigate-right">云貝中心</a>

								</li>

								<li class="mui-table-view-cell">

									<a class="mui-navigate-right">創作者中心</a>

								</li>

							</ul>

						</div>

						<div class="musicservice">

							<ul class="mui-table-view">

								<li class="mui-table-view-cell menu">

									<a class="mui-navigate-right">云村有票</a>

								</li>

								<li class="mui-table-view-cell">

									<a class="mui-navigate-right">商城</a>

								</li>

								<li class="mui-table-view-cell">

									<a class="mui-navigate-right">游戲專區</a>

								</li>

								<li class="mui-table-view-cell">

									<a class="mui-navigate-right">口袋彩鈴</a>

								</li>

							</ul>

						</div>



	                </div>

	            </div>

	        </aside>



			<!-- 主頁面標題 -->

			<header class="mui-bar mui-bar-nav">

			    <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="https://bbs.csdn.net/topics/#offCanvasSide"></a>

				  <input class="box" placeholder="Aya-MAMAMOO" v-model="KeyWord">

			</header>

			<div style="background-color: #000000;width: 100px;height: 100px;">123</div>



	   	 	<div class="mui-off-canvas-backdrop"></div>



	    </div>

	</div>

  <!-- <div>

    <header class="mui-bar mui-bar-nav">

    	<div class="songs-search">

        <div class="iconfont icon" name="search">&#xe616;</div>

        <input class="box" placeholder="Aya-MAMAMOO" v-model="KeyWord">

      </div>

    </header>

  </div> -->

</template>

<script type="text/javascript" src="https://bbs.csdn.net/mui/js/mui.min.js" charset="utf-8">



	mui(".mui-table-view").on('tap', '.mui-table-view-cell', function(){

		$(this).siblings('.mui-table-view-cell').removeClass('mui-active');

		$(this).addClass('mui-active');

	});



	mui('.menu').on('tap', 'a', function(e) {

		var myUrl = this.href;

		mui.init({

			subpages:[{

				url:myUrl,

				id:'list',

				styles:{

					top:'45px',

					bottom:'0px'

				}

			}],

			swipeBack:true

		});

		mui('.mui-off-canvas-wrap').offCanvas('close');

	});

</script>



<script>

  export default{

    name:"HomeHeader",

    data() {

      return {

        KeyWord: '',

      }

    },



    methods: {

      clearSearchInput() {

        this.KeyWord = '';

      }

    }

  }

</script>



<style type="text/css">

		* {

			touch-action: none;

			background-color: #ffffff;

		}



		.mui-scroll-wrapper {

			background-color: #FFFFFF;

		}



		.mui-table-view-cell.mui-active,

		.mui-table-view-cell>a:not(.mui-btn).mui-active {

			color: #007AFF;

			border: #007AFF;

			background-color: transparent;

		}

		.my{

			border-radius: .8rem;

			background-color: #ffffff;

		}

	</style>

標籤：HTML5

上一篇：vue腳手架3 npm run serve的問題

下一篇：小程式下載多張圖片到本地