用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 小技巧系列 查看内容

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

天下雪 2017-1-25 00:25

作者:oys1341,来自原文地址一:会滑动的顶部tab选项卡主要是在scroll-view设置scroll-x=“true”,然后在设置scroll-left(横向滚动条位置)为一定的数值,就可以了不废话直接进入主题test.wxmlscroll-view class= ...

作者:oys1341,来自原文地址

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

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

不废话直接进入主题

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. 邀请
    鲜花
    鲜花
    鸡蛋
    鸡蛋
    分享至 : QQ空间
    收藏
    来自: 原文地址

    相关阅读

    • 天下雪 2017-2-6 11:33
      jeffer: swiper中image标签设置图片显示不完全问题,可以通过设置image的width为100%来解决,同时mode设置为aspectFill 保证短边能显示完全 ...
      不错,你的评论补充了文章
    • jeffer 2017-1-25 09:09
      swiper中image标签设置图片显示不完全问题,可以通过设置image的width为100%来解决,同时mode设置为aspectFill 保证短边能显示完全