先看效果圖
這里主要是使用了weex 的 slider 實現了可以滑動的底部導航框架
這里最主要的幾個方法，如果光是看weex的官方文檔，可能很痛苦，因為有一些功能雖然代碼里已經寫好，但是他并沒有寫出來，希望官方的文檔能夠盡快的完善起來
實現這樣的功能，首先是一個slider的用法，這個官方文檔是用這個來給大家做輪播圖的。
首先我們不能設置自動播放ok了（直接不復制就ok了）
第二我們需要能夠捕獲到滾動到哪一頁的索引，這個值需要用來設置下面的當前tab（監聽slider的change 方法）
第三我們需要通過外部js去設置slider的當前頁面，譬如我們點擊第二個tab，我們需要把顯示的index 設置為1（index是從0開始的）官方文檔目前并沒有給出這塊的解釋
那么下面我們通過源碼挖掘，我們知道slider其實可以有一個屬性 :index
這個就是當前的索引了，那么我們需要設置這個索引，只要去改變這個對應得index 的值就可以了
那么這里就上代碼了（文中所有的圖片是去assets 文件夾取得圖片，并非本地圖片，所以需要自己放一些圖片到assets目錄）
<template> <div :style="{height:`${totalheight}px`}"> <slider style="flex:1;" @change="onchange" :index="page"> <div class="frame" v-for="img in imageList"> <image class="image" resize="cover" :src="img.src"></image> <text class="contenttext">這是第{{page+1}}頁</text> </div> </slider> <text style="background-color:gray;height:2px;bottom:100px;"/> <div class="nav"> <div class="link" @click="changepage(0)"> <image id="image1" v-bind:src="src1" class="logo"></image> <text class="title" :style="{color:page === 0?'#00BBE4':'gray'}">首頁{{pathchanged}}</text> </div> <div class="link" @click="changepage(1)"> <image v-bind:src="src2" class="logo"></image> <text class="title" :style="{color:page === 1?'#00BBE4':'gray'}">分類</text> </div> <div class="link" @click="changepage(2)"> <image v-bind:src="src3" class="logo"></image> <text class="title" :style="{color:page === 2?'#00BBE4':'gray'}">我的</text> </div> </div> </div></template><style scoped> .image { width: 750px; height: 700px; } .slider { width: 750px; height: 700px; border-width: 2px; border-style: solid; border-color: #41B883; } .frame { width: 750px; height: 700px; position: relative; } .logo { position: relative; width: 45px; height: 45px; } .nav { position: absolute; width: 750px; bottom: 0px; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .link { width: 162.5px; flex-shrink: 1; text-align: center; margin:0 auto; padding: 3px; align-items: center; } .title { font-size: 25px; line-height: 35px; text-align: center; top: 5px; } .contenttext { font-size: 32px; line-height: 35px; text-align: center; top: 25px; color: 38px; color: red; } </style><script> export default { data () { return { page:0, imageList: [ { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'}, { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}, { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'} ], src1: "../../../assets/home_btn_home_s.png", src2: "../../../assets/home_btn_rent.png", src3: "../../../assets/cut.png" } }, methods:{ onchange(evtValue){ this.page=evtValue.index }, changepage(page){ this.page=page } }, computed: { totalheight(){ const height = 750/weex.config.env.deviceWidth*weex.config.env.deviceHeight return height-180 }, pathchanged(){ var self = this if(self.page === 0){ self.src1 = "../../../assets/home_btn_home_s.png" self.src2 = "../../../assets/home_btn_rent.png" self.src3 = "../../../assets/cut.png" }else if(self.page === 1){ self.src1 = "../../../assets/home_btn_home.png" self.src2 = "../../../assets/home_btn_rent_s.png" self.src3 = "../../../assets/cut.png" }else if(this.page === 2){ self.src1 = "../../../assets/home_btn_home.png" self.src2 = "../../../assets/home_btn_rent.png" self.src3 = "../../../assets/cut_on.png" } return '' } } }</script>因為常常會遇到有同學問這塊的東西，所以就索性寫一個，給大家參考使用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
