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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 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
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
JS高级笔记
2011/07/13 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python中元组,列表,字典的区别
2017/05/21 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
如何通过python画loss曲线的方法
2019/06/26 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
法律专业实习鉴定
2013/12/22 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
担保书格式范文
2015/09/22 职场文书
《称赞》教学反思
2016/02/17 职场文书