文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

这篇文章将为大家详细讲解有关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 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 />
 <div class="nav">
 <div class="link" @click="changepage(0)">
 <image id="image1" v-bind:src="src1" class="logo"></image>
 <text class="title" :>首页{{pathchanged}}</text>
 </div>
 <div class="link" @click="changepage(1)">
 <image v-bind:src="src2" class="logo"></image>
 <text class="title" :>分类</text>
 </div>
 <div class="link" @click="changepage(2)">
 <image v-bind:src="src3" class="logo"></image> 
 <text class="title" :>我的</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>

关于“weex slider如何实现滑动底部导航功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯