微信小程序开发笔记（五）官方组件及扩展

最新推荐文章于 2024-08-06 14:26:07 发布

Scorpio_Happy

最新推荐文章于 2024-08-06 14:26:07 发布

阅读量1.1k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/happyghh/article/details/101155063

版权

本文是微信小程序开发笔记的第五篇，主要介绍了swiper组件的使用，包括图片视频混排、自定义轮播样式和tab样式用轮播实现翻页。还探讨了tab配置以及选择器，特别是自定义省市区选择器的实现。文章鼓励开发者根据需求进行扩展和实践。

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

微信小程序示例

这里仅仅记录下我在使用的时候遇到的问题以及如何解决，有可能会出现误导，或者不是最佳实现方式，欢迎批评指正。

提示： 微信小程序在不断更新完善，所以看文档真的很重要，同时关注官方文档更新是一个很好的习惯哦。

一）swiper

官方文档Swiper

轮播组件，APP中使用非常广泛，当然小程序中用的也很多，通常情况下都是几张图片，下面会有面板指示点，最直白的理解方式上面的截图就是一个标准的轮播图，这样应该比较清楚一点。最基本的轮播样式可通过文档知道各个属性的用途， circular=‘true’ 属性可以知道轮播是否衔接切换。如果不指定则轮播结束后会倒回到第一张，感觉比较生硬，使用了这个属性就会无缝切换到第一张。

swiper最基本的使用：

补充说明： data-id="{ {item}}"为组件绑定数据，item指imgUrls的某一项的值，index指imgUrls的下标。这个属性特别好用，例如一个商品列表，用户点击了某个商品，我们不仅可以通过下标去获取对应的商品列表数组中的商品，也可以直接绑定该商品的信息。

wxml：

   <swiper autoplay='true' indicator-dots='true' indicator-active-color='#fa6e57' indicator-color='#dadada' circular='true'>
    <block wx:for="{
  {imgUrls}}" wx:key="imgswiper">
      <swiper-item bindtap='tapSwiperItem'  data-id="{
  {item}}">
        <image src='{
  {item}}' ></image>
      </swiper-item>
    </block>
  </swiper>

js 相关的处理 imgUrls是轮播的图片的数组，

补充说明：e.currentTarget.dataset.id取出 data-id绑定的数据

data:{
 //-----------------1-----------------
    imgUrls:[
      "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640",
      "../../images/temp/slider.jpg",
      "https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640",
      "../../images/temp/slider.jpg",
      "https://images.unsplash.com/photo-1551446591-142875a901a1?w=640",
      "../../images/temp/slider.jpg"
    ],
 //-----------------2-----------------
 imgUrls: [
      {
        img: "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640"
      }, {
        img: "../../images/temp/slider.jpg",
      }, {
        img: "https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640"
      }, {
        img: "https://images.unsplash.com/photo-1551446591-142875a901a1?w=640"
      },
    ],
}
 /**
   * 点击轮播图
   */
  tapSwiperItem:function(e){
    console.log("轮播图点击》》》",e)

    var index = e.currentTarget.dataset.id
  }

imgUrls是轮播的图片的数组,
1 (对应备注1)在wxml 中取值===》用item可取到，
2 (对应备注2) 在wxml 中取值===》用item.img可取到，
如果没有其他要求，数组1即可满足，数组2可以有多个属性来控制，也可以理解为数组2存储的是对象，数组1存储的是元素

补充： 数据绑定操作在wxml中 data-id 则在js 中用 e.currentTarget.dataset.id 获取对应的值,用**data-**来对组件进行数据绑定，在js中取对应的值，data-后面的就是在js中取出的对应的e.currentTarget.dataset.后面对应的内容。

至此，一个基本的简单的轮播效果就出来啦，但是，如果仅仅是这样，那就太无聊啦，重要的是扩展，怎么扩展呢，比如轮播的内容是图片和视频混的，比如轮播的指示板不想用圆点，比如tab样式想用轮播实现翻页，比如轮播默认显示的是第二张图片，可以看到第一第三的部分内容，比如…，自己发挥想象。 OK, 继续来实现这些比如。

ONE 图片视频混排

首先，要确定数据是图片还是视频，可以让后端小哥哥给个字段表明是图片还是视频，也可以自己通过后缀判断是图片还是视频。如果是视频就用<video />，如果是图片就用<image />，当前显示的是图片，需要暂停视频，如果是视频就继续播放，播放视频的时候是否需要继续轮播等。视频是固定在第一个显示还是和图片混合显示位置是不确定的。
wxml：