android 例如微信下的选项卡怎么做

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.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> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"><!-- 我是哈哈 --><swiper-item> <view>我是哈哈</view></swiper-item><!-- 我是呵呵 --><swiper-item> <view>我是呵呵</view></swiper-item><!-- 我是嘿嘿 --><swiper-item> <view>我是嘿嘿</view></swiper-item> </swiper> 2.indexwxss /**indexwxss**/ swiper-tab{ width: 100%border-bottom: 2rpx solid #777777text-align: centerline-height: 80rpx} swiper-tab-list{ font-size: 30rpxdisplay: inline-blockwidth: 33%color: #777777 } on{ color: #da7c0cborder-bottom: 5rpx solid #da7c0c} swiper-box{ display: blockheight: 100%width: 100%overflow: hidden} swiper-box view{ text-align: center } 3.index.js //index.js //获取应用实例 var app = getApp() Page( {data: { /** * 页面配置 */ winWidth: 0, winHeight: 0, // tab切换 currentTab: 0,},onLoad: function() { var that = this /** * 获取系统信息 */ wxgetSystemInfo( { success: function( res ) { thatsetData( {winWidth: reswindowWidth,winHeight: reswindowHeight }) }}) },/** * 滑动切换tab */bindChange: function( e ) {var that = thisthatsetData( { currentTab: edetailcurrent }) },/** * 点击tab切换 */swichNav: function( e ) {var that = this if( thisdatacurrentTab === etargetdatasetcurrent ) { return false} else { thatsetData( { currentTab: etargetdatasetcurrent }) }} }) 这样一个类似viewpage的顶部选项卡就出来了.

微信小程序Swiper做Tab切换，带tab切换动画

小程序中我们做tab切换一般情况下可以做点击切换，但是有Swiper组件，其实我们也可以做滑动切换

监听Swiper的bindchange，我们就可以在切换时改变tab的选装状态达到切换的目的。

但是这样的方式tab的切换方式是跳转式的，体验不是很好。于是就有了这个demo，我们一步步优化切换体验。

首先：利用flex布局，做出tab区域，如果tab选项卡很多可以使用Scroll-view；一般的跳转式的tab用boder-bottom实现就好，这里我们加了一个“navbar-slider”，加上translateX动画实现平移切换。

然后：计算出每个tabItem的宽度，和每个item距离0坐标的距离；下中50是slider的宽度，对应上面“width:50px”

关联：1、监听item点击，切换swiper；2、监听swiper切换改变slider位置和tab显示

效果展示如下：

现在我们已经实现了，Swiper和tab的带动画联动，但是我们可以发现，我们的切换动画是在切换之后进行的，我们这里还可以继续优化。

swiper在切换时可以监听bindtransition，swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，dx则是平移的偏移量，我们可以通过这个监听来实时设置slider的位置。

切换后校正slider的位置，这里我们不能使用bindchange来校正，因为bindchange在切换时手指释放的时候就调用了，我们这里使用bindanimationfinish回调来校正（动画结束时会触发 animationfinish 事件，event.detail 同上）

最终：展示如下

在小程序开发文档中明确说明了最好不要频繁调用setData，我们最后这种方式就会频繁的调用，所以这里其实只是提供这种思路，但是工程中并不建议这么使用

小程序开发者文档

SwiperTab

1. 首先，打开微信，点击右上角的“+”号，选择“拍照/相册”，从相册或拍照中选择一张熊猫的照片。

2. 点击右上角的“编辑”，在编辑页面中，点击“文字”，在文字框中输入想要制作的举牌子的文字，点击“完成”，将文字添加到熊猫照片上。

3. 点击右上角的“字体”，选择想要的字体，点击“完成”，将字体添加到文字上。

4. 点击右上角的“颜色”，选择想要的颜色，点击“完成”，将颜色添加到文字上。

5. 点击右上角的“完成”，将熊猫举牌子制作完成。

---