欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

滑动的顶部tab选项卡，简易table表格，swiper图片显示不完整

发布：2018-01-25 09:55浏览： 次来源：网络 作者：tianshu

一：会滑动的顶部tab选项卡

主要是在scroll-view设置scroll-x=“true”,然后在设置scroll-left（横向滚动条位置）为一定的数值，就可以了

不废话直接进入主题

滑动的顶部tab选项卡，简易table表格，swiper图片显示不完整(图1)

 

test.wxml

  1. <scroll-view class="tab-scoller " scroll-x="true"  scroll-left="{{scrollLength}}">
  2.       <block wx:for="{{listTab}}" wx:key="code">
  3.             <view class="tab-view" data-index="{{index}}" id="{{item.code}}" bindtap="reflashData">
  4.                   <text class="tab-text active" wx:if="{{index == curIndex}}">{{item.text}}</text>
  5.                   <text class="tab-text" wx:else>{{item.text}}</text>
  6.             </view>
  7.       </block>
  8. </scroll-view> 
  9. <view style="width:100%;heigth:100%;">
  10.       <text style="position:absolute;top:50%;left:40%; font-size:1.5rem">{{curText}}</text>
  11. </view>

test.wxss

  1. .tab-scoller {
  2.   background: linear-gradient(to bottom, #2262fc, rgba(57, 134, 222, 0.84));
  3.   height: 3rem;
  4.   white-space: nowrap;
  5.   display: flex;
  6. }
  7. /*取消移动条*/
  8. ::-webkit-scrollbar {
  9.   width: 0;
  10.   height: 0;
  11.   color: transparent;
  12. }
  13. .active {
  14.   color: #000 !important;
  15.   background-color: #fff;
  16. }
  17. .tab-view {
  18.   text-align: center;
  19.   color: #fff;
  20.   font-size: 1rem;
  21.   height: 1.2rem;
  22.   width: 4rem;
  23.   margin-top: 1rem;
  24.   border-right: 1px solid #fff;
  25.   display: inline-block;
  26.   line-height: 1.2rem;
  27. }
  28. .tab-text {
  29.   display: block;
  30.   bottom: 0.4rem;
  31.   position: relative;
  32.   height: 1.5rem;
  33.   margin: 0 5%;
  34.   border-radius: 0.5rem;
  35.   padding: 0.3rem 0.2rem 0;
  36.   color: #fff;
  37. }

test.js

  1. // pages/more/test.js
  2. Page({
  3.   data: {
  4.     listTab:[
  5.       {"code":"01","text":"tab1"},
  6.       {"code":"02","text":"tab2"},
  7.       {"code":"03","text":"tab3"},
  8.       {"code":"04","text":"tab4"},
  9.       {"code":"05","text":"tab5"},
  10.       {"code":"06","text":"tab6"},
  11.       {"code":"07","text":"tab7"}
  12.     ],
  13.     curIndex:0,
  14.     curText:null,
  15.     scrollLength: 0
  16.   },
  17.   onLoad: function () {
  18.     console.log('onLoad') 
  19.     this.initData(0)
  20.   },
  21.   //初始化数据
  22.   initData:function(index){
  23.     var that = this
  24.     this.setData({
  25.         curIndex:index,
  26.         curText:that.data.listTab[index].text,
  27.       })
  28.   },
  29.   //tab点击事件，刷新数据
  30.   reflashData:function(event){
  31.     var that = this
  32.       var index = event.currentTarget.dataset.index
  33.       //移动滚动条,//200和35是我估算的
  34.       if(index > this.data.curIndex ){
  35.         if(that.data.scrollLength < 200){
  36.           this.setData({
  37.             scrollLength: that.data.scrollLength + 35 * (index - that.data.curIndex) 
  38.           })
  39.         }
  40.       }else{
  41.         if(that.data.scrollLength > 0){
  42.           this.setData({
  43.             scrollLength: that.data.scrollLength - 35 * (that.data.curIndex - index)
  44.           })
  45.         }
  46.       }
  47.       //移动view位置，改变选中颜色
  48.      this.initData(index)
  49.   },
  50. })





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有