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

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, // loadingschoolURL :'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})})//sliderListwx.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

小程序开发总结3：swiper滑块视图相关推荐

wxml报错原因_微信小程序开发教程（八）视图层——.wxml详解
框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...
微信小程序开发--如何在swiper中显示两个item以及下一个item的部分内容
如何在swiper中显示两个item以及下一个item的部分内容我所实现的效果我实现的代码 <!--要展示两个item 以及下一个item的部分内容,ci ...
【微信小程序开发•系列文章一】入门
本系统文章主要有以下几篇: <[微信小程序开发•系列文章一]入门> <[微信小程序开发•系列文章二]视图层> <[微信小程序开发•系列文章三]数据层> <[微 ...
小程序开发.微信小程序.组件.视图容器
小程序开发.微信小程序中的组件.视图容器组件 note:当前本文编辑中- 20220731 jcLee95 的个人博客邮箱 :291148484@163.com CSDN 主页:https://bl ...
微信小程序开发实现轮番图效果swiper 组件
轮番效果在很多的网站主页或者手机应用端都能看到,在微信小程序中使用swiper组件来实现图片轮番,今天的小例子效果如下: 为了方便演示我将动画切换的间隔调整为3s,现实项目中一般为5s,具体看项目需求 ...
微信小程序开发系列二：微信小程序的视图设计
大家如果跟着我第一篇文章微信小程序开发系列一:微信小程序的申请和开发环境的搭建一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
微信小程序开发学习4（视图与逻辑）
微信小程序开发学习4(视图与逻辑) 1.学习目标能够知道如何实现页面之间的导航跳转能够知道如何实现下拉刷新效果能够知道如何实现上拉加载更多效果能够知道小程序中常用的生命周期函数 2.页面导航 ...
python开发微信小程序-Python 开发者的微信小程序开发实践
导读在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
微信小程序开发的入门基础知识点
一.小程序介绍_安装_使用介绍小程序: 2017年1月9日,张小龙,腾讯. 支付宝现在也推出了小程序无需安装,无需卸载,触手可及,用完即走小程序基于微信,微信基于腾讯,腾讯有庞大的用户基数. 小 ...
了解微信小程序、掌握微信小程序开发工具的使用、了解小程序的目录以及文件结构、掌握小程序中常用的组件、掌握WXML、WXSS、WXS的基本使用
1 微信小程序介绍以及开发准备 1.1 了解微信小程序百度百科: 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及&quo ...

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

小程序开发总结3：swiper滑块视图相关推荐

最新文章

热门文章