微信小程序（组件---视图组件案例）

微信小程序swiper实现滑动放大缩小效果：

①先将基础轮播图写出来，开启无缝衔接模式circular

    carouselList:[
      { id: 1, imgSrc: "/imgs/01.png" },
      { id: 2, imgSrc: "/imgs/01.png" },
      { id: 3, imgSrc: "/imgs/01.png" }
    ],
    circularValue:true,

.carousel{
  width: 100%;
  height: 360rpx;
}
.carousel image{
  width: 100%;
  height: 360rpx;
}

②开启指示点
属性：

 indicator-dots="{{indicatorDots}}"
 indicator-color="{{indicatorColor}}"
 indicator-active-color="{{activeColor}}"

值：

// 开启指示点
indicatorDots:true,
//指示点颜色
indicatorColor:'rgba(0,0,0,.8)',
// 激活指示点的颜色
activeColor:'darkred',

③自定义指示点样式

.carousel .wx-swiper-dot{
  display: inline-flex;
  height: 10rpx;
  margin-left: 20rpx;
  justify-content: space-between;
}
.carousel .wx-swiper-dot{
  width: 20rpx;
}
.carousel .wx-swiper-dot-active{
  width: 40rpx;
}
.carousel .wx-swiper-dot::before{
  content: '';
  flex-grow: 1;
  background: rgb(255, 255, 255);
}
.carousel .wx-swiper-dot-active::before{
  background: darkred;
}

④添加前后边距
属性：

 previous-margin="{{previousMargin}}"
 next-margin="{{nextMargin}}"

值：

// 前边距
previousMargin:'30rpx',
// 后边距
nextMargin:'30rpx',

⑤设置中间激活块的类名active

swiperIndex:0,

changeSwiper(event){
    console.log(event.detail.current)
    this.setData({
      swiperIndex:event.detail.current
    })
  },

⑥分开设置激活态与普通状态样式，并添加过渡效果

/* 激活状态与普通状态样式 */
.carousel swiper-item{
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel image{
  width: 100%;
  height: 320rpx;
  transition: all 0.2s linear;
  padding: 0 15rpx;
  box-sizing: border-box;
}
.carousel image.active{
  height: 360rpx;
  transition: all 0.2s linear;
}

⑦添加间隙


⑧开启自动轮播

autoplay="{{autoplayValue}}"
interval="{{intervalValue}}"
duration="{{durationValue}}"

 // 自动播放
 autoplayValue:true,
 // 自动播放时间间隔
 intervalValue:'3000',
 // 滑动动画时长
 durationValue:'1200',

编写缩放类轮播图步骤：
①基础轮播图写出来，开启无缝衔接模式circular
②开启指示点
③自定义指示点样式
④添加前后边距
⑤设置中间激活块的类名active
⑥分开设置激活态与普通状态样式，并添加过渡效果
⑦添加间隙
⑧开启自动播放

小程序scroll-view实现滚动导航

①小程序scroll-view实现滚动导航

  
    {{item.title}}
  

scrollArray:[
  { id: 1, title: '推荐' },
  { id: 2, title: '生活用品' },
  { id: 3, title: '出行用品' },
  { id: 4, title: '食品零食' },
  { id: 5, title: '伴手礼' },
  { id: 6, title: '智能家居' }
],

.scrollList{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  white-space: nowrap;
  position: fixed;
  left: 0; 
  top: 0; 
  background: rgba(0,0,0,.2);
  z-index: 1;
  box-shadow: 0 1rpx 1rpx 0 #eee;
}
.scrollList view{
  display: inline-block;
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}

②去除横向滚动条
有时，设计图所给的样式不包含横向滚动条，所以需要去掉

③添加对应激活样式

  
    {{item.title}}
  

scrollIndex:1,

.scrollList view.scrollActive{
  color: #2d78f4;
  text-shadow: 0 1rpx 6rpx #2d78f4;
  position: relative;
}
.scrollList view.scrollActive::after{
  content: "";
  display: block;
  position: absolute;
  width: 150rpx;
  height: 4rpx;
  background: #2d78f4;
  left: 25rpx;
  bottom: 0;
}

④添加点击时对应的激活样式

scrollFn(event){
  const id=event.currentTarget.dataset.id;
  this.setData({
    scrollIndex:id
  })
},

此时，点击某个导航时会发生状态切换：

⑤部分机型问题解决
有时点击切换状态时，会发现部分机型上会出现背景，如下所示

方案：在wxss中添加-webkit-tap-highlight-color:rgba(0,0,0,0);

⑥动态设置横向滚动条位置

首先添加scroll-left属性设置初始化水平滚动条位置

data中设置初始值：scrollLeft:0,

接下来添加JS方法，设置scroll-view滚动条随点击自动滚动：

 scrollFn(event){
    const viewWidth=wx.getSystemInfoSync().windowWidth;
    const length=this.data.scrollArray.length;
    const id=event.currentTarget.dataset.id;
    const xValue=(id-2)*viewWidth/length;
    this.setData({
      scrollIndex:id,
      scrollLeft:xValue
    })
  },

此时点击食品零食时，发现滚动条自动向左移动一段距离

可以自动滚动后，发现滚动时没有渐变动画效果。给scroll-view添加scroll-with-animation属性即可开启渐变动画。


在data中设置初始值：scrollWithAnimation:true

scroll-view满屏滚动
有时，应客户需要，某些图片需要满屏滚动
直接设置height:100不是很好用，原因是因为这个高度没有参照物，以前开发网页是设置body的高度，这里小程序页面渲染容器是Page，所以先设置Page的高度100%，再设置scroll-view高度100%，问题得到解决。

 data: {
    scrollY:true
  },

page{
  width: 100%;
  height: 100%;
}
.scrollPage, .scrollPage image{
  width: 100%;
  height: 100%;
}

滚动Tab选项卡
①实现顶部导航点击切换效果，点击时对应激活，滚动条随之滚动

  
    {{item.title}}

.orderList{
  width: 100%;
  height: 80rpx;
  background: rgba(0,0,0,.2);
  white-space: nowrap;
  font-size: 32rpx;
  position: fixed;
  top: 0;
  left: 0;
}
.orderList view{
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  display: inline-block;
}
.orderList view.orderActive{
  color: #2d78f4;
  position: relative;
}
.orderList view.orderActive::after{
  content: "";
  display: block;
  width: 160rpx;
  height: 4rpx;
  background: #2d78f4;
  position: absolute;
  left: 20rpx;
  bottom: 0;
}

data: {
  // 导航滚动效果
    scrollX:true,
    orderArray:[
      { id: 0, title: '所有订单' },
      { id: 1, title: '待付款' },
      { id: 2, title: '待发货' },
      { id: 3, title: '待收货' },
      { id: 4, title: '待评价' },
      { id: 5, title: '退款中' }
    ],
    scrollIndex:0,
    scrollLeft:0,
    scrollWithAnimation:true
  },

scrollFn(event){
    // 获取可视窗口宽度
    const viewWidth=wx.getSystemInfoSync().windowWidth;
    console.log(viewWidth);
    // 获取导航数量
    const length=this.data.orderArray.length;
    console.log(length);
    const id = event.currentTarget.dataset.id;
    console.log(event.currentTarget.dataset.id)
    const xValue=(id-2)*viewWidth/length;
    this.setData({
      scrollIndex:id,
      scrollLeft:xValue
    })
  },

②设置导航下swiper轮播区域，重点：swiper高度自适应
swiper轮播区域高度自适应，且可以手动左右切换滑动展示页。

  
    {{item.info}}
  

.swiperArea{
  width: 100%;
  background: rgba(0,0,0,.2);
  margin-top: 80rpx;
}
.swiperArea swiper-item{
  width: 100%;
  height: 100%;
}

 heightVal:null,

onLoad: function (option) {
    var _this=this;
    _this.setData({
      swiperItemCount: _this.data.orderArray.length
    })
    // swiper高度自适应
    wx.getSystemInfo({
      success: function(res) {
        var clientHeight=res.windowHeight,
            clientWidth=res.windowWidth,
            rpxR=750/clientWidth;
        var calc = clientHeight*rpxR-80;
        _this.setData({
          heightVal:calc
        })
      },
    })
  },

③轮播激活项和导航激活项关联起来，即轮播手动切换滑动时，导航对应激活态改变；

 swiperIndex: 0

changeSwiper(event){
    const currentIndex = event.detail.current;
    this.setData({
      swiperIndex:currentIndex,
      scrollIndex:currentIndex
    })
    console.log(swiperIndex)
  },

此时滑动轮播图，切换时导航也会随之切换。

④轮播激活项和导航激活项关联起来，即导航点击相应选项时，底下轮播也对应切换

分析：点击导航对应tab按钮时，下面轮播图切换到对应展示页，这里需要swiper的current属性



此时滑动轮播图时，导航对应按钮也会切换；点击导航按钮时，底下轮播图展示区域也会切换。


⑤切换轮播图时，上面导航可以切换，但滚动条没有对应滑动，所以接下来添加监听滚动条滑动

⑥当前为止，滑动轮播图时，上面导航滚动条可以实现对应滚动，但最后一张切换回第一张时上面按钮无法对应

此时，在最后一张再往下滑动时，导航按钮处便会返回第一页。

⑦此时，便实现了滚动Tab选项卡切换页面，即tab与swiper的双向绑定结合，这也是常见的效果之一
接下来开始在swiper显示页面里，添加相关展示信息。

⑧在swiper展示页中添加展示信息

swiperScrollList:[
      { name: '卫衣', money: 120, count: 2, imgSrc:'/imgs/newsImgs/04.png'},
      { name: '连衣裙', money: 260, count: 6, imgSrc: '/imgs/newsImgs/03.png' },
      { name: '帽子', money: 100, count: 12, imgSrc: '/imgs/newsImgs/04.png' },
      { name: '口罩', money: 60, count: 6, imgSrc: '/imgs/newsImgs/05.png' },
      { name: '运动鞋', money: 350, count: 4, imgSrc: '/imgs/newsImgs/06.png' },
      { name: '书包', money: 100, count: 2, imgSrc: '/imgs/newsImgs/07.png' },
      { name: '铅笔', money: 2, count: 20, imgSrc: '/imgs/newsImgs/08.png' },
      { name: '篮球', money: 40, count: 8, imgSrc: '/imgs/newsImgs/05.png' }
]

.swiperScroll{
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  flex-direction: column;
}
.swiperScroll .orderBox{
  width: 100%;
  height: 200rpx;
  border-bottom: 1rpx solid #ddd;
  display: flex;
  align-items: center;
}
.swiperScroll .orderBox image{
  width: 150rpx;
  height: 150rpx;
  margin: 0 20rpx;
}
.orderInfoView{
  font-size: 32rpx;
  color: #888;
  flex-grow: 1;
}
.orderInfoView>view:nth-child(1){
  margin-top: 25rpx;
  display: flex;
  justify-content: space-between;
  padding: 0 25rpx;
  height: 50rpx;
  line-height: 50rpx;
}
.orderInfoView>view:nth-child(2){
  height: 70rpx;
  line-height: 70rpx;
  display: flex;
  justify-content: space-between;
  padding: 0 25rpx;
}
.swiperScroll .orderBox>view button{
  display: inline-block;
  width: 150rpx;
  height: 50rpx;
  font-size: 30rpx;
  padding: 0;
  margin: 0;
  line-height: 50rpx;
  margin-top: 20rpx;
  background: #2d78f4;
  color: #fff;
}

⑨在swiper展示页中添加展示信息，渲染结果