微信小程序之swiper

最新推荐文章于 2024-12-01 17:19:32 发布

Lu_Ca

最新推荐文章于 2024-12-01 17:19:32 发布

阅读量568

点赞数

分类专栏：微信小程序文章标签： swiper 微信小程序微信小程序添加图片

本文链接：https://blog.youkuaiyun.com/Lu_Ca/article/details/79446004

版权

微信小程序专栏收录该内容

3 篇文章

订阅专栏

新建一个page，然后默认有.js .json .wxml .wxss四个文件。首先先在wxml文件中定义控件

<!--pages/thirdPage/detail.wxml-->

  <view class="page__bd">
    <view class="section section_gap swiper">
      <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
        autoplay="{{autoplay}}" interval="{{interval}}" 
        duration="{{duration}}">
         <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image"/>
      </swiper-item>
  </block>
      </swiper>
    </view>
    <view class="text_info">
    <text>　　我是一篇文章\n</text>
    
    </view>
    
  </view>

定义了一个swiper，然后设置indicator、自动播放、间隔等属性。

在wxss文件中，我理解的是用来修饰和布局这些控件的，

.text_info{
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

和android类似，定义距离左右上下边距。

然后在js文件中引入需要的数据和实现的方法

data: {

    imgUrls: [
       '/images/first.jpg',
      '/images/second.jpg',
      '/images/third.jpg',
      '/images/sixth.jpg',
      '/images/fourth.jpg',
      '/images/fifth.jpg',
      
    ],
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 3000,
    duration: 1200
  },

其中，imgUrls是图片的数据源，本地图片。。。

顺便说一下本地图片添加方式，与其他编译器不同的是，微信小程序需要打开项目目录，在目录中定义一个文件夹，然后拷贝图片到这个目录下，然后项目中就有图片了。