微信小程序之导航滑块视图容器功能的实现代码(简单两步)


Posted in Javascript onJune 19, 2020

先看效果图:

微信小程序之导航滑块视图容器功能的实现代码(简单两步)
微信小程序之导航滑块视图容器功能的实现代码(简单两步)

这个滑块除了可以点击上方的导航,还可以左右切换页面,随之导航也跟这切换。

实现步骤:

  • 编写滑块视图代码
  • 编写逻辑代码

wxml:

<view class="content">
  <view class="title">
    <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">关注</view>
    <view class="{{currentTab==1?'select':'default'}}" data-current="1" bindtap="switchNav">新鲜</view>
    <view class="{{currentTab==2?'select':'default'}}" data-current="2" bindtap="switchNav">推荐</view>
  </view>
  <swiper class="swiper" bindchange="swiperchange" current="{{currentTab}}" style="height:{{winHeight}}px">
    <swiper-item item-id="{{item.id}}">
      关注
    </swiper-item>
    <swiper-item item-id="{{item.id}}">
      新鲜
    </swiper-item>
    <swiper-item item-id="{{item.id}}">
      推荐
    </swiper-item>
  </swiper>
</view>

wxss:

.title{
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: #ff99cc;
  height: 100rpx;
  position: fixed;
  z-index: 9999999999999;
}
.select{
  width: 33%;
  text-align: center;
  height: 45px;
  line-height: 45px;
  color: white;
  border-bottom: 5rpx solid #ff99cc;
}
.default{
  margin:0 auto;
  padding:15px;
  color: #666;
}
.swiper{
  margin-top: 100rpx;
}

js:

data: {
  currentTab:1,
  winWidth:0,
  winHeight:0
 },

onLoad: function (options) {
  wx.getSystemInfo({
   complete: (res) => {
    this.setData({
     winWidth:res.windowWidth,
     winHeight:res.windowHeight
    })
   },
  })
 },
 switchNav(e){
  console.log(e)
  if(this.data.currentTab==e.target.dataset.current){
   return false
  }else{
   this.setData({
    currentTab:e.target.dataset.current
   })
  }
 },
 swiperchange(e){
  this.setData({
   currentTab:e.detail.current
  })
 },

总结

到此这篇关于微信小程序之导航滑块视图容器功能的实现代码(简单两步)的文章就介绍到这了,更多相关微信小程序滑块视图容器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 #Javascript
深入解读VUE中的异步渲染的实现
Jun 19 #Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 #Javascript
微信小程序收藏功能的实现代码
Jun 19 #Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 #Javascript
微信小程序返回上一级页面的实现代码
Jun 19 #Javascript
小程序中的箭头函数的具体使用
Jun 19 #Javascript
You might like
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
javaScript基础详解
2017/01/19 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python应用库大全总结
2018/05/30 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
numpy.random模块用法总结
2019/05/27 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
十佳党员事迹材料
2014/08/28 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
婚礼答谢礼品
2015/01/20 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技