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

作者：oys1341，来自原文地址

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

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

不废话直接进入主题

35ac1024a487189eb16a69df5d632ef5.png (9.7 KB, 下载次数: 32)

下载附件

2018-5-12 10:05 上传

test.wxml

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

test.wxss

.tab-scoller {
  background: linear-gradient(to bottom, #2262fc, rgba(57, 134, 222, 0.84));
  height: 3rem;
  white-space: nowrap;
  display: flex;
}
/*取消移动条*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.active {
  color: #000 !important;
  background-color: #fff;
}
.tab-view {
  text-align: center;
  color: #fff;
  font-size: 1rem;
  height: 1.2rem;
  width: 4rem;
  margin-top: 1rem;
  border-right: 1px solid #fff;
  display: inline-block;
  line-height: 1.2rem;
}
.tab-text {
  display: block;
  bottom: 0.4rem;
  position: relative;
  height: 1.5rem;
  margin: 0 5%;
  border-radius: 0.5rem;
  padding: 0.3rem 0.2rem 0;
  color: #fff;
}

test.js

// pages/more/test.js
Page({
  data: {
    listTab:[
      {"code":"01","text":"tab1"},
      {"code":"02","text":"tab2"},
      {"code":"03","text":"tab3"},
      {"code":"04","text":"tab4"},
      {"code":"05","text":"tab5"},
      {"code":"06","text":"tab6"},
      {"code":"07","text":"tab7"}
    ],
    curIndex:0,
    curText:null,
    scrollLength: 0
  },
  onLoad: function () {
    console.log('onLoad') 
    this.initData(0)
  },
  //初始化数据
  initData:function(index){
    var that = this
    this.setData({
        curIndex:index,
        curText:that.data.listTab[index].text,
      })
  },
  //tab点击事件，刷新数据
  reflashData:function(event){
    var that = this
      var index = event.currentTarget.dataset.index
      //移动滚动条,//200和35是我估算的
      if(index > this.data.curIndex ){
        if(that.data.scrollLength < 200){
          this.setData({
            scrollLength: that.data.scrollLength + 35 * (index - that.data.curIndex) 
          })
        }
      }else{
        if(that.data.scrollLength > 0){
          this.setData({
            scrollLength: that.data.scrollLength - 35 * (that.data.curIndex - index)
          })
        }
      }
      //移动view位置，改变选中颜色
     this.initData(index)
  },
})

二：简易table表格

由于需要开发小程序，前端又是自己弄，类似table的标签也没有，后来看到小程序文档中推荐使用flex布局，就把css中的flex布局学了一遍，效果还行，大家将就看一下 

7dc82e423325c8569349574d7bb9c76a.png (12.65 KB, 下载次数: 44)

下载附件

2018-5-12 10:05 上传

table.wxml

<view class="table">
  <view class="tr bg-w">
    <view class="th">head1</view>
    <view class="th">head2</view>
    <view class="th ">head3</view>
  </view>
  <block wx:for="{{listData}}" wx:key="{{code}}">
    <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
      <view class="td">{{item.code}}</view>
      <view class="td">{{item.text}}</view>
      <view class="td">{{item.type}}</view>
    </view>
    <view class="tr" wx:else>
      <view class="td">{{item.code}}</view>
      <view class="td">{{item.text}}</view>
      <view class="td">{{item.type}}</view>
    </view>
  </block>
</view>

table.wxss

.table {
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}
.td {
    width:40%;
    justify-content: center;
    text-align: center;
}
.bg-w{
  background: snow;
}
.bg-g{
  background: #E6F3F9;
}
.th {
  width: 40%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
}

table.js

Page({
  data: {
    listData:[
      {"code":"01","text":"text1","type":"type1"},
      {"code":"02","text":"text2","type":"type2"},
      {"code":"03","text":"text3","type":"type3"},
      {"code":"04","text":"text4","type":"type4"},
      {"code":"05","text":"text5","type":"type5"},
      {"code":"06","text":"text6","type":"type6"},
      {"code":"07","text":"text7","type":"type7"}
    ]
  },
  onLoad: function () {
    console.log('onLoad') 
  }
})

效果图如下

三：swiper图片显示不完整

我把微信小程序中swiper的官方代码拷贝下来发现图片显示不完全，像这样不能完全填满整个宽度，后来看官方image标签的解释和描述，各种mode换了个遍，css也修改了很多次，还是不会（水平不到家······）

后来就想到把图片作为背景，把官方的代码修改一下，好像就行了， 
官方wxml代码

c651483c1149d9681e2b25128590dbe4.png (85.85 KB, 下载次数: 36)

下载附件

2018-5-12 10:05 上传

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

修改后的代码

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
      <!--差别就再这里了-->
    <swiper-item  style="background:url({{item}});background-repeat: no-repeat;background-size:100% 200px; ">
    </swiper-item>
  </block>
</swiper>

7d8f4ac14e8fad0808383e5b235e078b.png (92.73 KB, 下载次数: 38)

下载附件

2018-5-12 10:05 上传

反正经过这次，以后发现图片显示不全的问题，就试试把图片当作背景吧