index.wxml:
<view class="container">
<view class="main">
<text class="ip">您的手机IP:{
{
motto.query}}
</text>
<text class="location">IP位置:{
{
motto.city}},{
{
motto.regionName}},{
{
motto.country}}
</text>
<text class="timezone">时区:{
{
motto.timezone}}
</text>
<text class="lat">纬度:{
{
motto.lat}}
</text>
<text class="lon">经度:{
{
motto.lon}}
</text>
</view>
</view>
index.wxss:
.container{
width: 100%;
height:100%;
overflow:hidden;
position:fixed;
background-size: 100% 100%;
background-image: url('http://image-shenlihong.test.upcdn.net/ip.jpg');
}
.main{
width: 90%;
float: left;
height: 800rpx;
margin-top: 10%;
background: white;
opacity: 0.7;
border-radius: 20rpx;
}
.ip{
width: 100%;
height: 10%;
float: left;
text-align: center;
margin-top: 10%;
color: #6FFFFF;
}
.location{
width: 100%;
height: 10%;
float: left;
text-align: center;
margin-top: 10%;
color: #6FFFFF;
}
.timezone{
width: 100%;
height: 10%;
float: left;
text-align: center;
margin-top: 10%;
color: #6FFFFF;
}
.lat{
width: 100%;
height: 10%;
float: left;
text-align: center;
margin-top: 10%;
color: #6FFFFF;
}
.lon{
width: 100%;
height: 10%;
float: left;
text-align: center;
margin-top: 10%;
color: #6FFFFF;
}
index.js:
var app = getApp()
Page({
data: {
motto: '' // IP地址
},
onLoad: function (e) {
// 获取参数
var that = this;
wx.request({
// 获取ip
url: 'http://ip-api.com/json',
success: function (e) {
that.setData({
motto: e.data
})
console.log(e.data)
}
})
},
onPullDownRefresh: function () {
console.log('onPullDownRefresh')
// 3秒模拟数据加载
// 不加这个方法真机下拉会一直处于刷新状态,无法复位
setTimeout(function() {
wx.stopPullDownRefresh()
wx.showToast({
title: '数据获取成功!', // 标题
icon: 'success', // 图标类型,默认success
duration: 1500 // 提示窗停留时间,默认1500ms
})
}.bind(this),2200);
}
})