weex slider實現(xiàn)滑動底部導(dǎo)航功能

更新時間：2017年08月28日 16:18:17 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了weex slider實現(xiàn)滑動底部導(dǎo)航功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了weex slider實現(xiàn)滑動底部導(dǎo)航功能的具體代碼，供大家參考，具體內(nèi)容如下

先看效果圖

這里主要是使用了weex 的 slider 實現(xiàn)了可以滑動的底部導(dǎo)航框架

這里最主要的幾個方法，如果光是看weex的官方文檔，可能很痛苦，因為有一些功能雖然代碼里已經(jīng)寫好，但是他并沒有寫出來，希望官方的文檔能夠盡快的完善起來

實現(xiàn)這樣的功能，首先是一個slider的用法，這個官方文檔是用這個來給大家做輪播圖的。

首先我們不能設(shè)置自動播放ok了（直接不復(fù)制就ok了）
第二我們需要能夠捕獲到滾動到哪一頁的索引，這個值需要用來設(shè)置下面的當(dāng)前tab（監(jiān)聽slider的change 方法）
第三我們需要通過外部js去設(shè)置slider的當(dāng)前頁面，譬如我們點擊第二個tab，我們需要把顯示的index 設(shè)置為1（index是從0開始的）官方文檔目前并沒有給出這塊的解釋

那么下面我們通過源碼挖掘，我們知道slider其實可以有一個屬性 :index
這個就是當(dāng)前的索引了，那么我們需要設(shè)置這個索引，只要去改變這個對應(yīng)得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>

因為常常會遇到有同學(xué)問這塊的東西，所以就索性寫一個，給大家參考使用。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: