weex slider实现滑动底部导航功能
程序员文章站
2023-12-20 23:49:40
先看效果图
这里主要是使用了weex 的 slider 实现了可以滑动的底部导航框架
这里最主要的几个方法,如果光是看weex的官方文档,可能很痛苦,因为有一...
先看效果图
这里主要是使用了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>
因为常常会遇到有同学问这块的东西,所以就索性写一个,给大家参考使用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。