小程序模仿蚂蚁森林浇水demo，树木浇水

小程序模仿蚂蚁森林浇水demo

各位伸手党可以直接拿
页面大概长这个样子；
其中的进度条用到了vant-weapp这个组件
vant-weapp官网

wxml代码：


```html
<view class="return" bindtap="before"><van-icon name="arrow-left" size="22px" color="#fff" /></view><view class="box"><view class="progress_box"><van-progress color="#f2826a" percentage="{{waternum}}" stroke-width="18" /><image class="jindt" src="/images/jdt.png"></image></view><view style="color:#fff;margin-top:8rpx;text-align:center;font-size:24rpx">再浇水17000g水滴，小树将茁壮成长为茂盛大树～</view><!-- 树 --><view bindanimationend="treeend" class="tree {{shutree?'a-swing':''}}"><!-- 大树 --><image wx:if="{{waternum==100}}" class="shumu" mode="aspectFill" src="../../../images/shu.png"></image><image wx:if="{{waternum>=60 && waternum<100}}" class="zhongshu" mode="aspectFill" src="../../../images/xiaoshu@1x.png"></image><image wx:if="{{waternum>=20 && waternum<60}}" class="xiaoshu" mode="aspectFill" src="../../../images/xiaoshumiao@1x.png"></image><image wx:if="{{waternum>=0 && waternum<20}}" class="youshu" mode="aspectFill" src="../../../images/xiaoshuya@1x.png"></image><image mode="aspectFill" class="shupan" src="/images/shupan.png"></image><image wx:if="{{waterbool}}" class="water" src="/images/water.png"></image></view><!-- /树 --><!-- 水瓶 --><view style="opacity:{{bottle?'1':'0'}}" bindanimationstart="bottlestart" bindanimationend="bottleend" class="bottle {{tree?'bottle-fadeIn':''}}  "><image mode="aspectFill" src="../../../images/shashui.png"></image></view><!--/水瓶--><!-- 雨水 --><view class="rain_box"><view class="line line1"><view></view><view></view><view></view><view></view><view></view></view><view class="line line2"><view></view><view></view><view></view><view></view><view></view></view><view class="line line3"><view></view><view></view><view></view><view></view><view></view></view></view><!-- 选项 --><view class="flex-between bot_s"><view class="left_tab flex-around"><image bindtap="answer" mode="aspectFill" src="/images/dt.png"></image><image bindtap="tosign" mode="aspectFill" src="/images/qd.png"></image><image bindtap="shaomiao" mode="aspectFill" src="/images/sm.png"></image></view><view><view class="imgs_box" bindtap="animation"><image mode="aspectFill" class="shuipan" src="/images/shuipan.png"></image><image mode="aspectFill" class="shuihu" src="/images/shashui.png"></image><view class="text">160g</view></view></view></view><!-- /雨水 --><!-- <view type="button" id="btn" bindtap="animation">浇水</view> -->
</view><image mode="aspectFill" class="tree_bg" src="/images/tree_bg.jpg"> </image>

**wxss:**```javascript.box {width: 100%;/* margin: 20rpx auto; */overflow: hidden;position: relative;z-index: 10;height: 100vh;/* padding-bottom: 30px; */
}.tree {width:100%;height:792rpx;/* background: url(../../../images/shu.png) no-repeat; */position: absolute;bottom:20%;
}
.tree>.shumu{width:470rpx;height: 620rpx;position: absolute;bottom:72rpx;z-index: 10;left: 50%;margin-left: -235rpx;
}
.tree>.zhongshu{width:400rpx;height: 550rpx;position: absolute;bottom:72rpx;z-index: 10;left: 50%;margin-left: -200rpx;
}
.tree>.xiaoshu{width: 250rpx;height: 480rpx;  position: absolute;bottom:72rpx;z-index: 10;left: 50%;margin-left: -95rpx;
}
.tree>.youshu{width: 170rpx;height: 180rpx;  position: absolute;bottom:60rpx;z-index: 10;left: 50%;margin-left: -85rpx;
}
.bottle {position: absolute;bottom: 23%;right: 150rpx;width: 180rpx;height: 130rpx;transition: 1.8s;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);
}
.bottle image{width: 100%;height: 100%;
}.rain_box {position: absolute;overflow: hidden;top: 440rpx;right:380rpx;
}.rain_box .line {width: 8rpx;float: left;position: relative;
}.rain_box .line view {margin-top: 4rpx;height: 4rpx;width: 4rpx;background: #384;border-radius: 6rpx;opacity: 0
}.rain_box .line1 {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);margin-left: 30rpx;
}.rain_box .line2 {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);transform: rotate(30deg);margin-left: 4rpx;
}.rain_box .line3 {-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-ms-transform: rotate(20deg);-o-transform: rotate(20deg);transform: rotate(20deg);margin-left: 6rpx;
}#btn {position: absolute;top: 180rpx;right: 20rpx;height: 40rpx;width: 100rpx;background: #f60;border: none;color: #fff;
}/* animation *//* animation */.a-swing{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}.bottle-fadeIn{-webkit-animation:.8s ease;-moz-animation:.8s ease;-ms-animation:.8s ease;animation:.8s ease;}.a-watering{-webkit-animation:0.9s ease 0 3;-moz-animation:0.9s ease  0 3;-ms-animation:0.9s ease  0 3;animation:0.9s ease  0 3;}/* 摇摆 */.a-swing{animation:swing 1s ;}.bottle-fadeIn{-webkit-animation-name:bottleFadeIn;-moz-animation-name:bottleFadeIn;-ms-animation-name:bottleFadeIn;animation-name:bottleFadeIn 4s ;}.a-watering{-webkit-animation-name:watering;-moz-animation-name:watering;-ms-animation-name:watering;animation-name:watering;}/*水瓶动画*/@keyframes bottleFadeIn{0%{opacity:0;bottom:340rpx;right:0;-webkit-transform:rotate(0deg);}100%{opacity:1;bottom:23%;right:150rpx;-webkit-transform:rotate(-45deg);}}/*流水动画*/@keyframes watering{0%{opacity:0;}100%{opacity:1;height:8rpx;}}/* 摇摆 */@keyframes swing{0%{-webkit-transform:scale(1);}25%{-webkit-transform:scale(1.1);}50%{-webkit-transform:scale(1);}75%{-webkit-transform:scale(1.1);}100%{-webkit-transform:scale(1);}}
/*    @keyframes swing{20%{transform:rotate(15deg);}40%{transform:rotate(-10deg);}60%{transform:rotate(5deg);}80%{transform:rotate(-5deg);}100%{transform:rotate(0);}} */.van-progress__portion{background:-webkit-repeating-linear-gradient(-45deg,orange 0px,orange 5px,rgb(255,231,156) 8px,rgb(255,231,156) 16px)!important;border-radius: 120rpx!important;}.van-progress__pivot{right: -60rpx!important;}.progress_box{width: 80%;position: relative;margin:200rpx auto 0;left: 50%;height: 65rpx;margin-left: -40%;}.van-progress{background: transparent!important;z-index: 10;height: 36rpx!important;left: 13rpx!important;top: 6rpx!important;}.van-progress__pivot{background: transparent!important;}.tree_bg{width: 100vw;height: 100vh;position: absolute;z-index: 1;}.return{position:absolute;z-index:99;top:110rpx;left:30rpx;}.bot_s{padding:0 56rpx;position: absolute;bottom:15rpx;}.left_tab image{width: 98rpx;height: 124rpx;margin-right: 42rpx;margin-top: 83rpx;}.left_tab image:last-child{margin-right: 53rpx;}.imgs_box{width:214rpx;height: 226rpx;position: relative;}.imgs_box .shuipan{width: 100%;height: 100%;position: absolute;}.imgs_box .shuihu{position: absolute;width:194rpx;height:138rpx;}.imgs_box .text{color: #fff;width: 80rpx;font-weight: bold;text-align: center;position: absolute;bottom: 20rpx;left: 50%;margin-left: -40rpx;}.shupan{/* padding:; */width: 430rpx;height: 150rpx;position: absolute;bottom: 0;left: 50%;margin-left: -225rpx;}.water{width: 22rpx;height: 33rpx;position: absolute;z-index: 99;bottom: 0;left: 50%;transform: rotateZ(45deg);margin-left: 1rpx;margin-bottom: 75rpx;}.jindt{width: 105%;height: 100%;position: absolute;bottom: 9rpx;}.van-progress__portion{transition: .4s!important;}

JSON:

{"usingComponents": {},"navigationStyle":"custom"
}

**js:**```javascript
// index/pages/tree/tree.js
Page({/*** 页面的初始数据*/data: {djshu:4,//树的等级1，2，3，4tree:false,waternum:0,waterbool:false,animation:true,shutree:false,bottle:false},treeend(){//树动画结束this.setData({tree:false,shutree:false,animation:true,})var num=this.data.waternumif(num==100){wx.showToast({title: '你以完成任务',})return false}this.setData({waternum:num+=20})},before(){wx.navigateBack({delta: 1,})},bottlestart(){//水滴动画开始前this.setData({bottle:true})},bottleend(){//水滴动画结束this.setData({bottle:false,tree:false,waterbool:true,})setTimeout(()=>{this.setData({shutree:true,waterbool:false,})},500)},animation(){//动画事件启动var animation=this.data.animationif(animation){this.setData({animation:false,tree:true})}else{return false}},answer(){wx.navigateTo({url: '/index/pages/dati/dati',})},tosign(){wx.navigateTo({url: '/index/pages/qiandao/qiandao',})},shaomiao(){wx.switchTab({url: '/pages/zwy/zwy',})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

用到的图片：

如果觉得有帮助到你！
咳咳咳咳咳~~~///(^v)\~~~

小程序模仿蚂蚁森林浇水demo，树木浇水相关推荐

微信小程序实现蚂蚁森林效果
wxml: <view class="view_energy"><view class="energy_all&qu ...
微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类
可到我的github账号上去copy文件先展示一下我实现了的功能吧提示,如果有出现无法加载域名之类问题的的,可以在"设置"-"项目设置"-打钩"不 ...
基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...
互联网+废品回收小程序,废品回收小程序,废品回收小程序平台,蚂蚁废收小程序
互联网+废品回收小程序,废品回收小程序,废品回收小程序平台,蚂蚁废收小程序. 通过互联网+废品回收的创新模式,整合可利用资源,构造再生资源回收.分拣.转运.加工利用.集中处理为一体的产业化智能平台. ...
模仿蚂蚁森林动画效果
WaterView 项目地址:93Laer/WaterView 简介:模仿蚂蚁森林动画效果更多:作者提 Bug 标签: 模仿蚂蚁森林动画效果
教辅小程序之微课页面Demo
教辅小程序之微课页面Demo 源代码下载https://download.csdn.net/download/lujiebin/11241027 1.近做毕设的微信小程序,下面是我的微课页面的Demo ...
[解读小程序]手机归属地查询Demo(四)
[解读小程序]手机归属地查询Demo(四) 分析的程序来源: http://blog.csdn.net/y1258429182/article/details/52666290 下载链接:http:/ ...
微信小程序-模仿绘制聊天界面
参考文章 1.小程序模仿微信聊天界面 2.微信小程序实现仿微信聊天界面(各种细节处理) 3.微信小程序之页面中关于聊天框三角形的制作和使用 4.仿微信聊天记录时间显示 5.微信小程序-同时获取麦克风. ...
微信小程序模仿开眼视频app（二）——搜索功能
微信小程序模仿开眼视频app(一)有介绍首页.视频详情和分类部分可到我的github账号上去copy文件搜索部分一开始没想要设置历史记录啊.热门搜索啊这些的,只是想把搜索框弄好看一点,无意中发现 ...

小程序模仿蚂蚁森林浇水demo，树木浇水

小程序模仿蚂蚁森林浇水demo

小程序模仿蚂蚁森林浇水demo，树木浇水相关推荐

最新文章

热门文章