weex slider实现滑动底部导航功能


Posted in Javascript onAugust 28, 2017

本文实例为大家分享了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 :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>

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

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

Javascript 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
window.location和document.location的区别分析
Dec 23 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
javascript自执行函数
Feb 10 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
JS实现简单九宫格抽奖
Jun 28 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 #Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 #Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 #Javascript
JS实现图片手风琴效果
Apr 17 #Javascript
vue服务端渲染的实例代码
Aug 28 #Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
使用react-router4.0实现重定向和404功能的方法
Aug 28 #Javascript
You might like
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
玛琪朵 Macchiato
2021/03/03 咖啡文化
php如何实现只替换一次或N次
2015/10/29 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python爬取微博评论的实例讲解
2021/01/15 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
成语的广告词
2014/03/19 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
武夷山导游词
2015/02/03 职场文书
小学运动会通讯稿
2015/07/18 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技