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


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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
mapboxgl实现带箭头轨迹线的代码
Jan 04 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
详解js类型判断
2018/05/22 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
js中的闭包实例展示
2018/11/01 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
python3 字符串知识点学习笔记
2020/02/08 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
记帐员岗位责任制
2014/02/08 职场文书
大学班级计划书
2014/04/29 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL