溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹基于better-scroll如何實現類似京東的分類列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
效果圖和目錄結構
1、main.js（需要安裝router）
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '../src/assets/js/mock'
import axios from 'axios'
axios.defaults.baseURL='http://mockjs.com/api'
Vue.prototype.$http=axios
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')2、router.js
如果字體圖標引入錯誤，百度阿里字體圖標引入方法
import Vue from 'vue'
import Router from 'vue-router'
import './assets/css/iconfont.css' //全局引入字體圖標
Vue.use(Router)
export default new Router({
linkExactActiveClass:'active',
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: ()=>import('./views/home.vue')
},
{
path: '/class',
name: 'class',
component: () => import('./views/class.vue')
},
{
path: '/shopcart',
name: 'shopcart',
component: () => import('./views/shopcart.vue')
},
{
path:'/me',
name:'me',
component:()=>import('./views/me.vue')
}
]
}) 3、App.vue
<template>
<div id="app">
<router-view></router-view>
<v-tabbar></v-tabbar>
</div>
</template>
<script>
import tabbar from '../components/tabbar';
export default {
components:{
'v-tabbar':tabbar,
},
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background-color: #efeff4;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
.clearfix:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
font-size: 0;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%;
}
</style>4、tabbar.vue
<template>
<div class="tabbar">
<div class="tabbar">
<router-link class="tab_list" to="/" exact>
<i class="iconfont"></i>
<p>首頁</p>
</router-link>
<router-link class="tab_list" to="/class">
<i class="iconfont"></i>
<p>分類</p>
</router-link>
<router-link class="tab_list" to="/shopcart">
<i class="iconfont"></i>
<p>購物車</p>
</router-link>
<router-link class="tab_list" to="/me">
<i class="iconfont"></i>
<p>我的</p>
</router-link>
</div>
</div>
</template>
<style lang="scss" scoped>
.tabbar {
position: fixed;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 42px;
padding-top: 8px;
background-color: #fff;
.tab_list {
flex: 1;
i {
font-size: 18px;
}
p {
font-size: 14px;
}
}
.active {
color: #ffaf77;
}
}
</style>
5、class.vue
<template>
<div class="class">
<div class="head">
<i class="iconfont"></i>
<span>分類</span>
</div>
<div class="main">
<div class="wrapper" ref="wrapper">
<ul class="content">
<!-- 分類列表 -->
<li v-for="(item,index) in detialList" :key="index" @click="listClick(index)" :class="index===active?'active':''">{{item.list}}</li>
</ul>
</div>
<div class="detialList_box">
<!-- 分類詳情列表 -->
<ul class="detialList clearfix" v-for="(item,index) in detialList" v-show="index===active" :key="index">
<li class="detial_title">{{item.list}}</li>
<li v-for="(item,index) in item.detial" :key="index">
<img :src="item.src" alt="">
<p>{{item.text}}</p>
</li>
</ul>
<div class="padding_color"></div>
</div>
</div>
</div>
</template>
<script>
import BScroll from "better-scroll";
export default {
data() {
return {
detialList: [ //分類數據
{
list:'保健品',
detial:[
{src:require('../assets/images/shop1.png'),text:'愛他美'},
{src:require('../assets/images/shop1.png'),text:'愛他美'},
{src:require('../assets/images/shop1.png'),text:'愛他美'},
{src:require('../assets/images/shop1.png'),text:'愛他美'},
{src:require('../assets/images/shop1.png'),text:'愛他美'},
{src:require('../assets/images/shop1.png'),text:'愛他美'},
]
},
{
list:'酒水',
detial:[
{src:require('../assets/images/shop1.png'),text:'酒水'},
{src:require('../assets/images/shop1.png'),text:'酒水'},
{src:require('../assets/images/shop1.png'),text:'酒水'},
{src:require('../assets/images/shop1.png'),text:'酒水'},
{src:require('../assets/images/shop1.png'),text:'酒水'},
{src:require('../assets/images/shop1.png'),text:'酒水'},
]
},
{
list:'茶葉',
detial:[
{src:require('../assets/images/shop1.png'),text:'茶葉'},
{src:require('../assets/images/shop1.png'),text:'茶葉'},
{src:require('../assets/images/shop1.png'),text:'茶葉'},
{src:require('../assets/images/shop1.png'),text:'茶葉'},
{src:require('../assets/images/shop1.png'),text:'茶葉'},
{src:require('../assets/images/shop1.png'),text:'茶葉'},
]
},
{
list:'農產品',
detial:[
{src:require('../assets/images/shop1.png'),text:'農產品'},
{src:require('../assets/images/shop1.png'),text:'農產品'},
{src:require('../assets/images/shop1.png'),text:'農產品'},
{src:require('../assets/images/shop1.png'),text:'農產品'},
{src:require('../assets/images/shop1.png'),text:'農產品'},
{src:require('../assets/images/shop1.png'),text:'農產品'},
]
},
],
active:0,
detialtext:'保健品'
};
},
methods: {
listClick(index){ //顯示隱藏分類詳情
this.active=index;
this.detialtext=index;
}
},
created() {
// mockjs模擬數據
// this.$http.get("/detial").then(res => {
// this.detialList=res.data.detials
// });
},
mounted() {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.wrapper, { //better-scroll初始化
scrollY, //豎向滾動
click:true //滾動區域可觸發點擊事件
});
});
}
};
</script>
<style lang="scss" scoped>
.class {
height: 100%;
.head {
position: fixed;
z-index: 999;
top: 0;
left: 0;
height: 44px;
width: 100%;
line-height: 44px;
text-align: center;
color: #fff;
background-color: #ff8c3c;
i {
position: absolute;
left: 10px;
}
}
.main {
display: flex;
height: 100%;
.wrapper {
overflow: hidden;
width: 80px;
height: 100%;
background-color: #fff;
.content {
padding-top: 40px;
padding-bottom: 80px;
li {
height: 40px;
width: 80px;
line-height: 40px;
padding-left: 10px;
text-align: left;
background-color: #fff;
border: 1px solid #efeff4;
}
.active {
background-color: #efeff4;
border-left: 2px solid #ff0000;
}
}
}
.detialList_box {
flex: 1;
overflow: hidden;
margin: 0 8px;
background-color: #fff;
.detialList {
padding-bottom: 20px;
li {
float: left;
width: 33.3333333%;
img {
width: 100%;
}
}
.detial_title{
height: 40px;
width: 100%;
line-height: 40px;
margin-top: 40px;
background-color: #efeff4;
}
}
.padding_color {
background-color: #efeff4;
height: 100%;
}
}
}
}
</style>以上是基于better-scroll如何實現類似京東的分類列表的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
