vue移动端城市选择器仿京东特效代码下载


vue移动端城市选择器仿京东特效代码下载
vue移动端城市选择器仿京东特效代码下载以及移动端、城市选择器、仿京东等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
<script src="js/citys.js"></script>
<script src="js/resize.js"></script>

3. HTML代码

		<div id="app" class="vueBox">
			<div @click="showMenus(1)" v-text="current_city?current_city:'请选择收货地址'"></div>
			<div class="menus-mask" v-show="menu_show" @click="showMenus(0)" @touchmove.prevent></div>
			<div :class="['menus-box',menu_show?'menus-show':'']">
				<div class="menus-head">
					<div class="menus-head-title borderbottom">收货地址</div>
					<ul class="menus-tabs borderbottom">
						<li :class="{'active':cur_idx==index}" v-for="item,index in menu_tabs" @click="menusTabs(index)">
							<span v-text="item.name"></span>
							<i class="mintui mintui-back mintui-arrowright"></i>
						</li>
						<li v-if="!not_sub" :class="{'active':cur_idx==menu_tabs.length}" @click="menusTabs(menu_tabs.length)">
							<span>请选择</span>
						</li>
					</ul>
				</div>
				<ul class="menus-ul" :style="{'left':-cur_index*50+'%'}">
					<li :class="['menus-li',{'cur':cur_index==i}]" v-for="menu,i in array">
						<div class="menus-item borderbottom" v-for="item,j in menu" @click="menusSelet(item,i,j)">
							<a :class="[values[i]==j?'active':'']">
								<p class="name">
									<span class="info-con-lable" v-if="item.is_vip">已购</span><span v-text="item.name"></span>
								</p>
								<i v-if="values[i]!==j&&item.cities||values[i]!==j&&item.areas" class="mintui mintui-back mintui-arrowright"></i>
								<i v-if="values[i]==j" class="mintui mintui-success"></i>
							</a>
						</div>
					</li>
				</ul>
			</div>
		</div>

相关推荐

发表评论

相关文章