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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
小程序实现列表倒计时功能
Jan 29 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(二)
2012/03/21 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
python使用itchat实现手机控制电脑
2018/02/22 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
python生成任意频率正弦波方式
2020/02/25 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
高中语文课后反思
2014/04/27 职场文书
怀念母亲教学反思
2014/04/28 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
施工安全责任协议书
2016/03/23 职场文书
导游词之临安白水涧
2019/11/05 职场文书