用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

yuzeng84 2017-12-11 14:35

写在前面最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所帮助实例1:滚动tab选项卡先看一下效果图吧, ...

写在前面

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

实例1:滚动tab选项卡

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

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

1、wxml

  1. <!-- tab header -->
  2. <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
  3. <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">全部</view>
  4. <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">营销系统</view>
  5. <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">家居建材</view>
  6. <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">美妆护肤</view>
  7. <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">数码电器</view>
  8. <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">母婴玩具</view>
  9. <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">零元购活动</view>
  10. </scroll-view>
  11. <!-- tab content -->
  12. <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="max-height:{{winHeight}}rpx">
  13. <swiper-item wx:for="{{[0,1,2,3,4,5,6]}}">
  14. <scroll-view scroll-y="true" class="scoll-h">
  15. <block wx:for="{{[1,2,3,4,5,6,7]}}" wx:key="*this">
  16. <view class='goods-Wrapper'>
  17. <image mode='widthFix' class="goods-img" src='../../image/goods1.jpg'></image>
  18. <view class="goods-info">
  19. <view>周边团门店微营销系统年费</view>
  20. <view>
  21. <text class='price'>¥298.00</text>
  22. <text class='line-delete'>
  23. ¥298.00
  24. </text>
  25. <label>
  26. <button><image mode='widthFix' src='../../image/icon1.png'></image>1人团</button>
  27. <button><image mode='widthFix' src='../../image/icon2.png'></image>去开团</button>
  28. </label>
  29. </view>
  30. </view>
  31. </view>
  32. </block>
  33. </scroll-view>
  34. </swiper-item>
  35. </swiper>

2、wxss <我只展示了tab菜单处的wxss,页面的样式就不在列出>
  1. .tab-h {
  2. height: 80rpx;
  3. width: 100%;
  4. box-sizing: border-box;
  5. overflow: hidden;
  6. line-height: 80rpx;
  7. background: #f7f7f7;
  8. font-size: 14px;
  9. white-space: nowrap;
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. z-index: 99;
  14. }
  15. .tab-item {
  16. margin: 0 36rpx;
  17. display: inline-block;
  18. }
  19. .tab-item.active {
  20. color: #4675f9;
  21. position: relative;
  22. }
  23. .tab-h .tab-item.active:after {
  24. content: "";
  25. display: block;
  26. height: 8rpx;
  27. width: 115rpx;
  28. background: #4675f9;
  29. position: absolute;
  30. bottom: 0;
  31. left: 5rpx;
  32. border-radius: 16rpx;
  33. }
  34. .tab-h .tab-item:nth-child(1).active:after {
  35. width: 52rpx;
  36. }
3、js
  1. var app = getApp();
  2. Page({
  3. data: {
  4. winHeight: "",//窗口高度
  5. currentTab: 0, //预设当前项的值
  6. scrollLeft: 0, //tab标题的滚动条位置
  7. expertList: [{ //假数据
  8. img: "",
  9. name: "",
  10. tag: "",
  11. answer: 134,
  12. listen: 2234
  13. }]
  14. },
  15. // 滚动切换标签样式
  16. switchTab: function (e) {
  17. this.setData({
  18. currentTab: e.detail.current
  19. });
  20. this.checkCor();
  21. },
  22. // 点击标题切换当前页时改变样式
  23. swichNav: function (e) {
  24. var cur = e.target.dataset.current;
  25. if (this.data.currentTaB == cur) { return false;

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: OkayChen 来自: 博客园