微信小程序 模仿拼多多首页中间内容区导航条

wxml

<view class='content-scroll-box'>
    <scroll-view class='content-scroll' scroll-x bindscroll="conScroll" lower-threshold="50rpx" bindscrolltolower="conScrLower" upper-threshold="50rpx" bindscrolltoupper="conScrUpper" scroll-with-animation>
      <block wx:for="{{contentIcons}}">
        <view class='con-sc-box-grup'>
          <view class='con-sc-box-item'>
            <icon class='iconfont {{item[0].ic}}'></icon>
            <text>{{item[0].icname}}</text>
          </view>
          <view class='con-sc-box-item' wx:if="{{!(item[1] == null)}}">
            <icon class='iconfont {{item[1].ic}}'></icon>
            <text>{{item[1].icname}}</text>
          </view>
        </view>
      </block>
    </scroll-view>
    <!-- 滚动条 -->
    <!-- <view class="con-sc-line-one {{lefOrRigOne ? 'con-sc-line-one-left' : 'con-sc-line-one-right'}}" style='width:{{conWid}}'></view> -->
    <view class="con-sc-line-one {{lefOrRigOne ? 'con-sc-line-one-left' : 'con-sc-line-one-right'}}" animation="{{animationData}}"></view>
    <view class='con-sc-line-two' style='left:{{leftTwo}}'></view>
  </view>

wxss

.content-scroll-box {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid #d1d4d4; 
  border-bottom: 7px solid #f2f2f2;
  color: #707070;
  font-size: 12px;
}
.content-scroll {
  width: 100%;
  height: 294rpx;
  line-height: 75rpx;
}
.con-sc-box-grup { 
  display: inline-block;
}
.con-sc-box-item {
  position: relative;
  width: 148rpx;
  height: 130rpx;
  text-align: center;
  line-height: 86px;
}
.con-sc-box-item .iconfont {
  font-size: 48rpx !important;
  color: red;
  position: absolute;
  left: 33%;
  top: -23px;
}
.con-sc-line-one {
  height: 13rpx;
  width: 40rpx;
  background-color: #f45f00;
  border-radius: 5px;
  /* margin: 0 10rpx 20rpx 335rpx; */
  position: absolute;
  top: 265rpx;
  z-index: 10;
}
.con-sc-line-one-left {
  left: 335rpx;
}
.con-sc-line-one-right {
  right: 347rpx;
}
.con-sc-line-two {
  width: 20rpx;
  height: 13rpx;
  background-color: #dfdfdf;
  border-radius: 5px;
  /* margin-bottom: 20rpx; */
  position: absolute;
  top: 265rpx;
  left: 383rpx;
}

js

var contentIcon = [
  [{ ic: 'icon-naozhong', icname: '限时秒杀' },
  { ic: 'icon-yagaoyashua', icname: '每日清仓' }],
  [{ ic: 'icon-chaoguo', icname: '多多矿场' },
  { ic: 'icon-bijiben', icname: '品牌馆' }],
  [{ ic: 'icon-shucai', icname: '一分抽奖' },
  { ic: 'icon-xiwanye', icname: '充值中心' }],
  [{ ic: 'icon-tangguo', icname: '爱逛街' },
  { ic: 'icon-qingkong', icname: '9块9特卖' }],
  [{ ic: 'icon-tangguo1', icname: '电器城' },
  { ic: 'icon-yugang', icname: '砍价免费拿' }],
  [{ ic: 'icon-diaodai', icname: '食品超市' },
  { ic: 'icon-xiaokuku', icname: '天天红包' }],
  [{ ic: 'icon-chaoguo', icname: '开宝箱领钱' },
  { ic: 'icon-xiwanye', icname: '明星送红包' }],
  [{ ic: 'icon-shejishi2', icname: '时尚穿搭' },
  { ic: 'icon-caidanshejishi', icname: '领券中心' }]
]
Page({
  data: {
    contentIcons: contentIcon,
    // conWid: '40rpx',
    lefOrRigOne: true,
    leftTwo: '383rpx',
    flag: true,
    animationData: {}
  },
  onReady:function(){
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: 'linear'
    });
    this.animation = animation;
  },
  conScroll:function(e){
    var len = this.data.contentIcons.length; //len为多少列
    var screenLen = wx.getSystemInfoSync().windowWidth; //屏幕宽度 单位px
    var conLenR = len * 148; //148为内容滚动区每一列的宽度 单位rpx
    var conLenP = screenLen / 750 * conLenR; //计算内容滚动区的像素长度(小程序规定屏幕宽度为750rpx)
    var scrollLen = conLenP - screenLen; //计算滚动轴需要滚动的距离 单位px
    var addLen;
    if (this.data.flag) {
      //40为红色线条的长度rpx  28为红色和灰色线条的空白区域8rpx 加上 灰色线条的长度20rpx
      addLen = 40 + e.detail.scrollLeft / scrollLen * 28 + 'rpx' 
      console.log("true" + e.detail.scrollLeft);
    }else{
      addLen = 40 + (scrollLen - e.detail.scrollLeft) / scrollLen * 28 + 'rpx' 
      console.log("false" + e.detail.scrollLeft);
    }
    this.animation.width(addLen).step();
    this.setData({
      // conWid: addLen,
      animationData: this.animation.export(),
    })
  },
  conScrLower: function(e){
    this.animation.width('40rpx').step();
    // this.animation.width('40rpx').step();
    this.setData({
      lefOrRigOne: false,
      // conWid: '40rpx',
      leftTwo: '335rpx',
      animationData: this.animation.export(),
      flag: false
    })
  },
  conScrUpper: function (e) {
    this.animation.width('40rpx').step();
    this.setData({
      lefOrRigOne: true,
      // conWid: '40rpx',
      leftTwo: '383rpx',
      animationData: this.animation.export(),
      flag: true
    })
  }
})

这里有用到字体图标 和 wx.creatAnimation接口
效果如下:
在这里插入图片描述
在这里插入图片描述

  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
仿拼多多小程序商城源码 源码描述: 一、源码特点 1、精致电商,来客, [ 微信 + 支付宝 + 百度 + 头条 ] 小程序 + APP + 公众号 + PC + H5,注重界面美感与用户体验,打造独特电商系统生态圈,不可多得的二开神器。 2、微信小程序电商平台(前后端开源PHP),包含分销,团,抽奖,红包,九宫格(老虎机)游戏等功能,整个系统架构非常简单,适合小型团队或者个人开发者二次开发。小程序 + APP + 公众号 + PC + 生活号 + 支付宝小程序 + 百度小程序 + 头条号小程序注重界面美感与用户体验,打造独特电商系统生态圈 二、菜单功能 1、 产品管理(产品分类管理、产品品牌管理、产品列表管理) 2、 订单管理(订单列表、评价管理、退货管理、订单设置、打印设置) 3、 用户管理(用户列表、用户信息修改) 4、 插件管理(插件列表、团活动、抽奖活动) 5、 财务管理(提现申请、提现列表、充值列表) 6、 优惠券管理(优惠券活动、优惠券列表) 7、 签到管理(签到活动、签到记录) 8、 拆红包管理(活动列表、拆红包记录) 9、 砍价管理(砍价商品、砍价记录) 10、 轮播图管理 11、 新闻管理(新闻分类、新闻列表) 12、 页面管理 13、 公告管理(发布公告、公告列表、消息公告) 14、 系统管理(系统参数配置、推广图设置、热门关键词、管理员列表、新增管理员、权限设置) 15、 团活动(发布活动、活动列表) 16、 抽奖管理(发布活动、开奖管理) 17、 saas服务插件 18、 分销插件 19、 多店铺插件+独立商家APP 三、注意事项 1、开发环境为PHP5.6+ MYSQL5.5+ 自主研发框架
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值