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


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 相关文章推荐
DOM 中的事件处理介绍
Jan 18 Javascript
js数组操作常用方法
May 08 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
js中延迟加载和预加载的具体使用
Jan 14 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
Protoss魔法科技
2020/03/14 星际争霸
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
Python中的闭包总结
2014/09/18 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python 接口返回的json字符串实例
2018/03/27 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
函授本科自我鉴定
2013/11/03 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
加强作风建设心得体会
2014/10/22 职场文书
乱世佳人观后感
2015/06/08 职场文书