左右滑动swiper

谁践踏了优雅 2022-06-01 11:58 346阅读 0赞

转自：http://blog.csdn.net/xieshunhai/article/details/72830938

.wxml

<view class="swiper-tab">  
  <view class="swiper-tab-list \{ \{currentTab==0 ? 'on' : ''\}\}" data-current="0" bindtap="swichNav">红色</view>  
  <view class="swiper-tab-list \{ \{currentTab==1 ? 'on' : ''\}\}" data-current="1" bindtap="swichNav">绿色</view>  
  <view class="swiper-tab-list \{ \{currentTab==2 ? 'on' : ''\}\}" data-current="2" bindtap="swichNav">黄色</view>  
</view>  
<view class="swiper-tab-temp"></view>  
<view>  
  <swiper current="\{ \{currentTab\}\}" autoplay="\{ \{true\}\}" class="swiper-box" duration="300" style="height:600px" bindchange="bindChange">  
    <swiper-item style="background-color:red">  
      红色内容  
    </swiper-item>  
    <swiper-item style="background-color:green">  
      绿色内容  
    </swiper-item>  
    <swiper-item style="background-color:yellow">  
      黑色内容  
    </swiper-item>  
  </swiper>  
</view>

.wxss

.swiper-tab \{  
  width: 100%;  
  border-bottom: 1px solid \#777;  
  text-align: center;  
  line-height: 40px;  
  background-color: \#fff;  
\}  
  
  
.swiper-tab-list \{  
  font-size: 13px;  
  display: inline-block;  
  width: 33.3%;  
  color: \#777;  
\}  
.on \{  
  color: \#FFF;  
  background-color: \#528dc3;  
  border-top:5rpx solid \#528dc3;  
  border-bottom:5rpx solid \#528dc3;  
\}  
  
  
.swiper-box \{  
  display: block;  
  height: 100%;  
  width: 100%;  
  overflow: hidden;  
\}  
  
  
.swiper-box view \{  
  text-align: center;  
\}

.js

Page(\{  
  data: \{  
    currentTab: '',  
  \},  
  /\*\*\* 滑动切换tab\*\*\*/  
  bindChange: function (e) \{  
    var that = this;  
    that.setData(\{ currentTab: e.detail.current \});  
  \},  
  /\*\*\* 点击tab切换\*\*\*/  
  swichNav: function (e) \{  
    var that = this;  
    that.setData(\{  
      currentTab: e.target.dataset.current  
    \});  
  \},  
  /\*  
    onshow  
   \*/  
\})

发表评论取消回复

表情：

评论列表（有 0 条评论，346人围观）

还没有评论，来说两句吧...

相关阅读

相关调整swiper中的左右滑动按钮位置

先上效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

短命女/ 2023年06月26日 08:29/ 0 赞/ 15 阅读

相关 uni-app :左右滑动 swiper

官方文档： [https://uniapp.dcloud.io/component/swiper?id=swiper][https_uniapp.dcloud.io_comp

ゝ一世哀愁。/ 2023年03月01日 14:00/ 0 赞/ 18 阅读

相关微信小程序使用swiper制作左右滑动tabs导航

首先我们先来看一下效果吧 ![20200520152402307.png][] ![20200520152409677.png][] 很简单 wxml <!-

桃扇骨/ 2023年02月10日 05:22/ 0 赞/ 24 阅读

相关移动端使用Swiper实现左右滑动切换内容

效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

青旅半醒/ 2022年12月19日 09:26/ 0 赞/ 457 阅读

相关 swiper反向滑动

swiper一直都是比较喜欢的一个插件，不管是设计还是我自己，都习惯了默认的向左滑动。今天客户要求必须向右，找了半天，终于找到了相应的参数。 direction

亦凉/ 2022年12月18日 09:55/ 0 赞/ 500 阅读

相关 swiper 快速左右滑动出现自动不停地抖动的BUG

<template> <view class="content"> <view class="nav"> <view :class=

青旅半醒/ 2022年11月25日 04:09/ 0 赞/ 350 阅读

相关 swiper禁止手动滑动

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6uICDlhYk_size_20_colo

清疚/ 2022年09月15日 14:56/ 0 赞/ 342 阅读

相关 swiper实现触摸滑动

引入需要的文件 <link href="css/swiper.min.css" rel="stylesheet" type="text/css"

骑猪看日落/ 2022年08月05日 02:43/ 0 赞/ 290 阅读

相关左右滑动swiper

转自：http://blog.csdn.net/xieshunhai/article/details/72830938 .wxml <view class="sw

谁践踏了优雅/ 2022年06月01日 11:58/ 0 赞/ 347 阅读

相关 scroll-veiw无法左右滑动让scroll-view左右滑动

在使用scroll-view组件的时候发觉无法左右滑动，经过测试才发觉有一个坑。直接用这个组件的时候还不可以左右滑动，还要设置一下样式才可以。 ![70

布满荆棘的人生/ 2022年05月22日 10:45/ 0 赞/ 284 阅读