小程序开发总结3：swiper滑块视图

最新推荐文章于 2025-06-23 17:17:27 发布

原创最新推荐文章于 2025-06-23 17:17:27 发布 · 1.1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序教程 #小程序 #教程 #swiper #图片不能显示

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

2 篇文章

订阅专栏

本文总结了微信小程序中使用swiper组件进行滑动视图容器的开发经验，包括组件的基本属性配置，实战中的应用，以及遇到的问题——本地图片URL无法在swiper中显示的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：知识点讲解

为达到”快速，极简”开发理念，微信官方以swiper组件的方式提供滑动视图容器，开发中只需通过简单的配置参数，就能完成滑动的需求，其中基本的属性定义如下

2：开发实战

开发过程只需用到swiper组件，并根据官方定义：“”其中只可放置<swiper-item/>组件，其他节点会被自动删除。“”

<view>
        <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
                autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" >
            <block wx:for="{{images}}">
                <swiper-item>
                    <image src="{{schoolURL}}{{item.images}}" class="slide-image"/>
                </swiper-item>
            </block>
        </swiper>
    </view>

和block组件结合使用，依据定义的for循环，动态生成对应数量的滚动图

js资源数据定义

//获取应用实例
var app = getApp()
Page({
    data: {
        indicatorDots: true,
        vertical: false,
        autoplay: true,
        interval: 3000,
        duration: 1000,
        loadingHidden: false, // loading
        schoolURL :'http://www.aninext.com'
    },
     imageError: function(e) {
        console.log('image3发生error事件，携带值为', e.detail.errMsg)
    },

     onLoad: function() {
        console.log('onLoad')
        var that = this
            //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo) {
            //更新数据
            that.setData({
                userInfo: userInfo
            })
        })

        //sliderList
        wx.request({
            url: 'http://www.aninext.com/searchKeyWord?keyWord=¤tPage=2&pageSize=8',
            method: 'GET',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
                that.setData({
                    images : res.data.resultParm.college,
                })
            }
        })
    }

})

其中图片数据通过微信提供的（wx.request）API获取到，并动态绑定到对应的视图

3：注意点

笔者在填写url的时候，想当然的填写了一个本地的图片地址，在调试过程才发现，不能正常被显示出来

所以如果开发过程发现自己的图片无法正常被显示，可以检查检查自己填写的url