<!--pages/two/two.wxml-->
<!-- <text>你好世界</text> -->
<view>
<swiper indicator-dots='true' mode="widthFix" indicator-color='#333' indicator-active-color='#f30' autoplay='true' style="height:{{imgheights}}px;">
<swiper-item class="banneritem" wx:for="{{bannerUrls}}" wx:key="url">
<!-- mode="widthFix" 这个属性是图片高度自适应 -->
<image src='{{item.url}}' mode="widthFix" ></image>
</swiper-item>
</swiper>
</view>
<view wx:for="{{newslist}}" wx:key="index">
<view class="item">
<view class="number-wrapper">
<text class="content">{{item.content}}</text>
</view>
</view>
</view>
/* 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*388
var 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();
}
}
})