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

最新推荐文章于 2024-01-01 17:50:01 发布

web scavengers~

最新推荐文章于 2024-01-01 17:50:01 发布

阅读量225

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_45626442/article/details/103368265

版权

本文介绍了微信小程序中视图容器组件的应用，包括swiper组件实现滑动放大缩小的轮播图，scroll-view组件用于横向滚动导航及满屏滚动效果，以及如何创建滚动Tab选项卡，详细解析了每个步骤和技术要点。

摘要由CSDN通过智能技术生成

大纲

（1）滑块视图容器swiper和滑块swiper-item组件
（2）小程序scroll-view实现横向滚动导航
（3）scroll-view满屏滚动
（4）滚动Tab选项卡

视图容器组件

（1）滑块视图容器swiper和滑块swiper-item组件
微信小程序swiper实现滑动放大缩小效果
在这里插入图片描述
①先将基础轮播图写出来，开启无缝衔接模式circular

<view>视图容器组件</view>
<swiper
  circular="{
  {circularValue}}"
  class="bannerArea1">
  <block wx:for="{
  {bannerList1}}" wx:key="imgSrc">
    <swiper-item>
      <image src="{
  {item.imgSrc}}"></image>
    </swiper-item>
  </block>
</swiper>

/*视图容器组件*/
.bannerArea1{
  width:100%;
  height:360rpx;
}
.bannerArea1 image{
  width:100%;
  height:360rpx;
  border-radius:9rpx;
}

在这里插入图片描述

②开启指示点
属性：

值：

dotsSatus:true,/*开启指示灯 */
    dotsColor:'rgba(0,0,0,.2)',/*指示点颜色*/
    dotsActiveColor:'#000000',/*激活点颜色*/

在这里插入图片描述
③自定义指示点样式

/*自定义焦点样式*/
.bannerArea1 .wx-swiper-dot{
  display:inline-flex;
  height:10rpx;
  margin-left:20rpx;
  justify-content: space-between;
}
.bannerArea1 .wx-swiper-dot{
  width:20rpx;
}
.bannerArea1 .wx-swiper-dot-active{
  width:40rpx;
}
.bannerArea1 .wx-swiper-dot::before{
  content: '';
  flex-flow: 1;
  background:rgb(255,255,255);
  border-radius: 3rpx;
}
.bannerArea1 .wx-swiper-dot-active::before{
  background:rgba(255,0,0,.8);
}

在这里插入图片描述
④添加前后边距
属性：

值：

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

在这里插入图片描述

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

/*设置中间激活块的类名active*/
.bannerArea1 swiper-item{
  display:flex;
  justify-content: center;
  align-items:center;
}
/*普通图片高度缩小显示*/
.bannerArea1 image{
  width:100%;
  height:320rpx;
  border-radius: 9rpx;
  transition:all 0.2s linear;/*过渡*/
}
/*激活态图片放大显示*/
.bannerArea1 image.active{
  height:360rpx;
  transition:all 0.2s linear;/*过渡*/
}

在这里插入图片描述
⑦添加间隙

⑧开启自动轮播