18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

外卖送餐微信小程序_weex slider完成滑动底部导航

2021-01-11分享 "> 对不起,没有下一图集了!">
weex slider实现滑动底部导航功能     投稿:lijiao   这篇文章主要为大家详细介绍了weex slider实现滑动底部导航功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 : 
 slider @change="onchange" :index="page" 
 div v-for="img in imageList" 
 image resize="cover" :src="img.src" /image 
 text 这是第{{page+1}}页 /text 
 /div 
 /slider 
 text / 
 div 
 div @click="changepage(0)" 
 image id="image1" v-bind:src="src1" /image 
 text :style="{color:page === 0 '#00BBE4':'gray'}" 首页{{pathchanged}} /text 
 /div 
 div @click="changepage(1)" 
 image v-bind:src="src2" /image 
 text :style="{color:page === 1 '#00BBE4':'gray'}" 分类 /text 
 /div 
 div @click="changepage(2)" 
 image v-bind:src="src3" /image 
 text :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: 'bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
 { src: 'bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
 { src: '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 

因为常常会遇到有同学问这块的东西,所以就索性写一个,给大家参考使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


"> 对不起,没有下一图集了!">
在线咨询