我的主人是二货

1 篇文章 0 订阅
1 篇文章 0 订阅

 我的主人是二货http://www.gifcool.com/mc/5574.html


好的,以下是我为您设计的智能猫屋首页页面的代码: ```html <!--index.wxml--> <view class="container"> <view class="header"> <view class="city">{{city}}</view> <image class="weather-icon" src="{{weatherIcon}}"></image> <view class="temperature">{{temperature}}°</view> </view> <swiper class="swiper" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{1000}}" circular="{{true}}"> <swiper-item wx:for="{{pictures}}"> <image class="swiper-item-image" src="{{item}}"></image> </swiper-item> </swiper> <scroll-view class="scroll-view" scroll-y="{{true}}" scroll-with-animation="{{true}}"> <view class="article" wx:for="{{articles}}" wx:key="index"> <image class="article-image" src="{{item.image}}"></image> <view class="article-title">{{item.title}}</view> <view class="article-summary">{{item.summary}}</view> </view> </scroll-view> </view> ``` ```css /*index.wxss*/ .container { display: flex; flex-direction: column; height: 100vh; } .header { display: flex; align-items: center; justify-content: center; height: 10vh; background-color: #F6F6F6; font-size: 30rpx; font-weight: bold; } .city { margin-right: 10rpx; } .weather-icon { width: 50rpx; height: 50rpx; } .temperature { font-size: 40rpx; } .swiper { height: 50vh; } .swiper-item-image { width: 100%; height: 100%; object-fit: cover; } .scroll-view { flex: 1; background-color: #FFF; } .article { display: flex; flex-direction: row; align-items: center; padding: 20rpx; border-bottom: 1rpx solid #F6F6F6; } .article-image { width: 200rpx; height: 200rpx; margin-right: 20rpx; object-fit: cover; } .article-title { font-size: 28rpx; font-weight: bold; margin-bottom: 10rpx; } .article-summary { font-size: 24rpx; color: #999; line-height: 1.5; } ``` ```javascript //index.js Page({ data: { city: '北京', weatherIcon: '', temperature: '', pictures: [ '/images/cat1.jpg', '/images/cat2.jpg', '/images/cat3.jpg', '/images/cat4.jpg' ], articles: [ { image: '/images/article1.jpg', title: '如何让猫咪不挠沙发', summary: '猫咪挠沙发是很多宠物主人的困扰,下面分享几种防止猫咪挠沙发的方法。' }, { image: '/images/article2.jpg', title: '如何让猫咪不挑食', summary: '猫咪挑食是很多宠物主人的困扰,下面分享几种让猫咪不挑食的方法。' }, { image: '/images/article3.jpg', title: '如何让猫咪不掉毛', summary: '猫咪掉毛是很多宠物主人的困扰,下面分享几种防止猫咪掉毛的方法。' }, { image: '/images/article4.jpg', title: '如何让猫咪不失眠', summary: '猫咪失眠是很多宠物主人的困扰,下面分享几种让猫咪不失眠的方法。' }, { image: '/images/article5.jpg', title: '如何让猫咪不得病', summary: '猫咪得病是很多宠物主人的困扰,下面分享几种让猫咪不得病的方法。' } ] }, onLoad: function () { this.getWeather(); }, getWeather: function () { var that = this; wx.request({ url: 'https://api.seniverse.com/v3/weather/now.json?key=yourkey&location=' + that.data.city + '&language=zh-Hans&unit=c', success: function (res) { var weatherCode = res.data.results[0].now.code; var temperature = res.data.results[0].now.temperature; that.setData({ weatherIcon: '/images/weather/' + weatherCode + '.png', temperature: temperature }); } }); } }) ``` 需要注意的是,代码中的天气接口需要替换成您自己的接口,并且需要在小程序后台添加相应的接口权限。同时,轮播图和文章列表的图片需要自己准备好,然后放在项目的 images 文件夹中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值