258资源分享网

最近在负责一个微信小程序的前端以及前后端接口的对接的项目，整体上所有页面的布局我都已经搭建完成，里面有一些常用的特效，总结一下，希望对大家和我都能有所帮助

先看一下效果图吧，能够点击菜单或滑动页面切换，tab菜单部分可以实现左右滚动

好了，看一下我的源码吧！<喜欢的话拿走不谢哟>

1、wxml

<!-- tab header -->

<scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">

<view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">全部</view>

<view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">营销系统</view>

<view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">家居建材</view>

<view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">美妆护肤</view>

<view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">数码电器</view>

<view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">母婴玩具</view>

<view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">零元购活动</view>

</scroll-view>

<!-- tab content -->

<swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="max-height:{{winHeight}}rpx">

<swiper-item wx:for="{{[0,1,2,3,4,5,6]}}">

<scroll-view scroll-y="true" class="scoll-h">

<block wx:for="{{[1,2,3,4,5,6,7]}}" wx:key="*this">

<view class='goods-Wrapper'>

<image mode='widthFix' class="goods-img" src='../../image/goods1.jpg'></image>

<view class="goods-info">

<view>周边团门店微营销系统年费</view>

<view>

<text class='price'>¥298.00</text>

<text class='line-delete'>

¥298.00

</text>

<label>

<button><image mode='widthFix' src='../../image/icon1.png'></image>1人团</button>

<button><image mode='widthFix' src='../../image/icon2.png'></image>去开团</button>

</label>

</view>

</view>

</view>

</block>

</scroll-view>

</swiper-item>

</swiper>

2、wxss <我只展示了tab菜单处的wxss，页面的样式就不在列出>

.tab-h {

height: 80rpx;

width: 100%;

box-sizing: border-box;

overflow: hidden;

line-height: 80rpx;

background: #f7f7f7;

font-size: 14px;

white-space: nowrap;

position: fixed;

top: 0;

left: 0;

z-index: 99;

}

.tab-item {

margin: 0 36rpx;

display: inline-block;

}

.tab-item.active {

color: #4675f9;

position: relative;

}

.tab-h .tab-item.active:after {

content: "";

display: block;

height: 8rpx;

width: 115rpx;

background: #4675f9;

position: absolute;

bottom: 0;

left: 5rpx;

border-radius: 16rpx;

}

.tab-h .tab-item:nth-child(1).active:after {

width: 52rpx;

}

3、js

var app = getApp();

Page({

data: {

winHeight: "",//窗口高度

currentTab: 0, //预设当前项的值

scrollLeft: 0, //tab标题的滚动条位置

expertList: [{ //假数据

img: "",

name: "",

tag: "",

answer: 134,

listen: 2234

}]

},

// 滚动切换标签样式

switchTab: function (e) {

this.setData({

currentTab: e.detail.current

});

this.checkCor();

},

// 点击标题切换当前页时改变样式

swichNav: function (e) {

var cur = e.target.dataset.current;

if (this.data.currentTaB == cur) { return false;