weex slider实现滑动底部导航功能 weex slider实现滑动底部导航功能
人气:0想了解weex slider实现滑动底部导航功能的相关内容吗，在本文为您仔细讲解weex slider实现滑动底部导航功能的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：weex滑动底部导航,weex滑动导航,weex,slider滑动底部导航，下面大家一起来学习吧。
先看效果图
这里主要是使用了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>
因为常常会遇到有同学问这块的东西，所以就索性写一个，给大家参考使用。
加载全部内容