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 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
Array.filter中如何正确使用Async
Nov 04 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
swiper自定义分页器使用方法详解
2020/09/14 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
pandas apply多线程实现代码
2020/08/17 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
教师考核评语
2014/04/28 职场文书
先进集体申报材料
2014/12/25 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
平遥古城导游词
2015/02/03 职场文书
幼儿园辞职书
2015/02/26 职场文书
小学生交通安全寄语
2015/02/27 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
pytorch 6 batch_train 批训练操作
2021/05/28 Python