小程序轮播图和for的遍历

{{item.content}}

/* pages/two/two.wxss */
.banneritem{width: 100%;
}
.banneritem image{width: 100%;
}
.item {width: 100%;height: 186rpx;position: relative;display: flex;margin: 10rpx 10rpx;border-bottom: 1px solid rgb(197, 199, 199);
}
.content {font-size: 0.875rem;
}

// pages/two/two.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {bannerUrls: [{url: './images/1.jpg',linkUrl: ''},{url: './images/2.jpg',linkUrl: ''},{url: './images/3.jpg',linkUrl: ''}],imgheights: '',newslist: []},/*** 组件的方法列表*/methods: {onLoad: function () {var that = this;that.imageLoad();wx.request({url: 'http://api.tianapi.com/zaoan/index',data: {key: '2fa8bdec666c46942e03ae3a158e2339'},method: 'GET',header: {'content-type': 'application/json'},success: res => {//1:在控制台打印一下返回的res.data数据console.log(res.data.newslist)//2:在请求接口成功之后，用setData接收数据this.setData({//第一个data为固定用法newslist: res.data.newslist})}})},imageLoad: function () {var that = this;wx.getSystemInfo({success: function (res) {//我们设计图片的尺寸是750*388var width = res.windowWidth; //获取当前屏幕的宽度var rao = 750 / width; //图片宽度／屏幕的宽度var height = 388 / rao; //图片高度／比例that.setData({'imgheights': height //设置等比缩放的宽度})},})},//刷新onRefresh() {//在当前页面显示导航条加载动画wx.showNavigationBarLoading();//显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框wx.showLoading({title: '刷新中...',})this.getData();},//网络请求，获取数据getData() {wx.request({url: 'http://api.tianapi.com/zaoan/index',data: {key: '2fa8bdec666c46942e03ae3a158e2339'},method: 'GET',header: {'content-type': 'application/json'},success: res => {//1:在控制台打印一下返回的res.data数据console.log(res.data.newslist)//2:在请求接口成功之后，用setData接收数据this.setData({//第一个data为固定用法newslist: res.data.newslist})},//网络请求执行完后将执行的动作complete(res) {//隐藏loading 提示框wx.hideLoading();//隐藏导航条加载动画wx.hideNavigationBarLoading();//停止下拉刷新wx.stopPullDownRefresh();}})},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {//调用刷新时将执行的方法this.onRefresh();}}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！