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

先看效果图:


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

实现步骤:

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

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
  })
 },

总结

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

时间: 2020-06-17

微信小程序视图容器(swiper)组件创建轮播图

本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下 一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档 二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { l

微信小程序之滚动视图容器的实现方法

微信小程序之滚动视图容器的实现方法 直接上两种方案代码以及效果图: 方案1 这种方案是直接使用view,并设置overflow: scroll wxml: <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view> </view> wxss: .con

微信小程序 教程之wxapp视图容器 swiper

相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view 微信小程序视图容器:swiper ​滑动面板 ​滑动面板 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 autoplay Boolean false 是否自动切换 current Number 0 当前所在页面的index interval Number 5000

微信小程序实现带刻度尺滑块功能

摘要: 与自带的slider不同的是,它是通过手势滑动标尺得到取值,而不是通过滑动滑块本身. 效果图 场景 当一屏显示不下,例如年龄体重选择,金额选择等大区间需要的选择器,相比自带的picker要直观一些. 思路: 先画一个scrollView 2 装进canvas lineTo画刻度线段,lineTo+fill画出三角形游标,fillText描绘文本标签 通过bindscroll监听刻度尺触摸事件 渲染取值到页面 基本布局 <scroll-view scroll-x="true"

微信小程序 教程之wxapp视图容器 scroll-view

相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view scroll-view 可滚动视图区域. 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 lower

微信小程序 开发之滑块视图容器(swiper)详解及实例代码

微信小程序 开发之滑块视图容器详解 实现效果图: 实现起来特别简单,看看代码是怎么写的呢: <swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="

微信小程序开发之相册选择和拍照详解及实例代码

微信小程序 拍照和相机选择详解 前言: 小程序中获取图片可通过两种方式得到,第一种是直接打开微信内部自己的样式,第一格就是相机拍照,后面是图片,第二种是弹框提示用户是要拍照还是从相册选择,下面一一来看. 选择相册要用到wx.chooseImage(OBJECT)函数,具体参数如下: 直接来看打开相机相册的代码: Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var t

微信小程序 POST请求(网络请求)详解及实例代码

微信小程序 POST请求 微信小程序开发中网络请求必不可少.GET.POST请求是最常用的.GET请求,POST请求的时候有好几个坑.我已经为大家填好了. <img src="http://img.blog.csdn.net/20161017170933243?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Cente

微信小程序本作用域下调用全局JS详解及实例

微信小程序本作用域下调用全局JS详解 本地wxml文件 <view> app版本:{{version}} </view> 本地js文件 var app; Page({ data:{ }, onLoad:function() { app = getApp(); this.setData({version:app.globalData.appName}); } }) 全局js文件 //app.js App({ globalData:{ appName:"hcoder"

微信小程序 教程之wxapp 视图容器 view

相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view View 视图容器. 示例: <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp"

微信小程序按钮点击跳转页面详解

微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

微信小程序 页面跳转及数据传递详解

微信小程序 页面跳转及数据传递详解 类似 Android 的 Intent 传值,微信小程序也一样可以传值: 例如:wxml 中写了一个函数跳转: <view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任务</view> <view class="containVertical

微信小程序 可搜索的地址选择实现详解

这篇文章主要介绍了微信小程序 可搜索的地址选择实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最终实现效果: 效果实现步骤 新建index文件夹 index.wxml <!--pages/index/index.wxml--> <view class='container'> <view bindtap='onChangeAddress'> <input value="{{address}}&q