微信小程序实现各种特效实例

写在前面

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

实例1：滚动tab选项卡

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

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

1、wxml

    <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>
    
    <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.00text> 
                  <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;
}