一对一免费咨询:189-6833-3365

微信小程序的轮播图和Android的轮播图一点不一样 ,这里我们看一下我们需要用到的控件介绍 这里我们用到了swiper这个组件,上边的图片已经把这个组件的属性(property) 都列出来了 我们用的时候直接用就可以了 接下来,再看一下 。。
微信小程序的轮播图和Android的轮播图一点不一样 ,这里我们看一下我们需要用到的控件介绍
这里我们用到了swiper这个组件,上边的图片已经把这个组件的属性(property) 都列出来了 我们用的时候直接用就可以了接下来,再看一下网络请求的API,这里我们用到的是GET 请求,我们开一下微信小程序官方给我们的API
接下来就是开启我们小程序(GOOGLE PRocedure)轮播图之旅了,附上一张效果图
首先,我们看一下我们的index。wxml文件
lt;view gt; lt;swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange" gt; lt;block wx:for="{{images}}" gt; lt;swiper-item gt; lt;image src="{{item。宁波微信小程序开发其中,通过公众号关联,用户可以实现公众号与小程序之间相互跳转。小程序体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。 宁波小程序开发对于用户来说,能够节约使用时间成本和手机内存空间;对于开发者来说也能节约开发和推广成本。picurl}}" / gt; lt;/swiper-item gt; lt;/block gt; lt;/swiper gt; lt;/view gt;123456789101112123456789101112
index。js文件
var app = getApp()Page({/*** 页面的初始数据*/data: {//是否显示指示点 true 显示 false 不显示indicatorDots: true,//控制方向vertical: false,//是否自动切换autoplay: true,//自动切换时间间隔interval: 3000,//滑动动画时长duration: 1000,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this//调用应用实例的方法获取全局数据app。宁波小程序开发对于开发者而言,小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换。getUserInfo(function (userInfo) {//更新数据that。setData({userInfo: userInfo})})//网络请求 GET方法wx。request({url: 'http://huanqiuxiaozhen。com/wemall/slider/list',method: 'GET',data: {},header: {'Accept': 'application/json'},//成功后的回调success: function (res) {console。log('11111' + res),that。setData({images: res。data})}})}})123456789101112131415161718192021222324252627282930313233343536373839404(死页面)14243444546474849501234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
index。wxss 这里就是简单的控制(control)了一下显示的样式。swiper_box {width: 100%;}swiper-item image {width: 100%;display: inline-block;overflow: hidden;}123456789123456789

© 2008-2019 浙江东美 ALL RIGHTS RESERVED. XMLBAIDU

免责申明:部分内容来自互联网,若侵犯了您的权益,请告知我们删除!

浙ICP备19019195号-1
找网站建设公司就上东美!
189-6833-3365
tel+86-189-6833-3365