小程序＋动易SF制作随手拍实例全景式操作(1)

小程序效果

首页相关代码：

wxml:

<view class="wrap"><view class="btns">
<button formType="submit" class="btn btn1" hover-class='btn_on' bindtap='show1'>使用说明</button>
<button formType="submit" class="btn" hover-class='btn_on' bindtap='enter'>进入填报</button>
</view>
<view class="copyright">五华县人民检察院</view><scroll-view scroll-y="true" style="height:100%;" class="modal-box" hidden="{{flag1}}"><view class="modal-body"><view class="modal-content"><view class="hd">便民随手拍简介</view>
<view class="bd">“便民随手拍”可以广泛地应用于各个行政执法单位，可最大限度的贴近人民群众，能够非常便捷地收集群众提交的各项信息，为行政执法机关更好的做好行政执法工作、消除监管盲点提供更多渠道。</view>
<view class="bd">功能应用：1、举报违规建坟、违规土葬等行为；2、举报违章建筑、占道经营等行为；3、举报侵占林地、山地、农田等违法行为；4、举报不文明(乱倒垃圾、污染水源、脏乱差等)行为；5、其他……</view>
<view class="bd">行政执法机关管理员可以登录后台查看群众提交的信息，将群众提交的手机GPS定位信息、现场图片和提交事项等，以信息形式转发给相关部门。相关部门执法人员可以通过GPS信息和现场图片快速的找到事发地点，并做好处理工作，防止事态进一步扩大。</view><button formType="submit" class="knowBtn" hover-class='knowBtn_on'  bindtap="hide1">我知道了</button>        </view></view></scroll-view>
</view>

wxss:

page {
overflow:scroll;
position:fixed;
background-image:url(https://wx.iteacher.org.cn/images/index_wx.png);
margin: 0px;
/*下面的是关键的设置100%显示*/
background-size: 100% 100%;
}
.wrap{position: relative;width : 100%;box-sizing: border-box;display: flex;height:auto;overflow-y: auto;
}
.btns{height: 80rpx;width: 600rpx;position: fixed;bottom: 40px;left:50%;margin-left: -300rpx;
}.btn{height: 80rpx;line-height: 80rpx;width: 280rpx;text-align: center;background: #2fb7f7;border-radius: 5px;float: left;color:#fff;
}
.btn1{
float:right;
}
.btn::after {border: 0;
}.btn_on {background-color:#2fb7f7;color:#fff;
}.modal-box{position:fixed;width:100%;height:auto;top:0px;  overflow: scroll;
}.modal-body{}.modal-content{margin:40rpx;border-radius: 10rpx;background:rgba(0,0,0,0.75);color:#fff;padding:15px;
}
.modal-content .hd{text-align: center;font-size: 20px;height:90rpx;line-height: 90rpx;margin-bottom:15px;border-bottom:1px dashed #fff;
}.modal-content .bd{text-align: left;font-size: 16px;text-indent: 2rem;
}.knowBtn{height: 80rpx;line-height: 80rpx;width: 500rpx;text-align: center;background: #2fb7f7;border-radius: 5px; margin:15px auto 0px;color:#fff;
}.knowBtn::after {border: 0;
}.knowBtn_on {background-color:#fff;color:#000;
}.copyright{height: 40rpx;width: 100%;position: fixed;bottom: 10px;
text-align: center;
color:#fff;
}

js:

var app = getApp()
Page({data: {flag1: true, //弹出层显示与否  //disabled: true,  //是否可用//opacity: 0.7,    //设置透明度//counttime:8},/** 生命周期函数--监听页面加载 */onLoad: function (options) {},//出现show1: function () {var that=this;that.setData({flag1: false });//countDown(that,8);},//消失hide1: function () {this.setData({flag1: true,//disabled: true,//opacity: 0.7})},enter:function(){wx.navigateTo({url: '../form/form'})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})//倒计时60秒
function countDown(that, count) {if (count == 0) {that.setData({counttime: count,opacity:1,disabled:false})return;}that.setData({counttime: count})setTimeout(function () {count--;countDown(that, count);}, 1000);
}

小程序＋动易SF制作随手拍实例全景式操作(1)相关推荐

小程序＋动易SF制作随手拍实例全景式操作(2)
填报提交页相关代码 wxml: <view class="hd">公益诉讼随手拍</view><view class="wrap" ...
小程序＋动易SF制作随手拍实例全景式操作(3)
问题类型选取页 wxml: <view class="wrap"> <view class="hd">问题类型</view> ...
碉堡的小程序：用 Python 制作演示迷宫算法的 gif 动画
微信改版,加星标不迷路! 碉堡的小程序:用 Python 制作演示迷宫算法的 gif 动画作者:neozhaoliang 本文要介绍的是我写的一个有趣的小程序,一个脱离了低级趣味的程序,一个有益于广 ...
在小程序中实现海报制作
wx.canvasToTempFilePath(object, component) 通过这个方法把画布的指定区域的内容导出生成指定大小的图片,并返回一个文件路径. 这里容易出现的问题就是生成的 ...
微信小程序：意见反馈制作（1）（可加图片）
微信小程序:意见反馈制作(可加图片) 不同类型的微信小程序可能需要不同的意见反馈样式,仅以我做的为例,具体样式可自行修改 1.小程序自带意见反馈(非常简单) <button open-type= ...
小程序（倒计时的制作）
小程序(倒计时的制作) 微信小程序如火如荼,今天我借教程做一篇倒计时效果的小程序页面. 这样的效果是怎样实现的呢按以下步骤操作 wxml文件放个text: <view><text& ...
微信点餐小程序怎么做？微信小程序点餐系统制作
顾客不用排队等待,打开微信扫一扫二维码,就能通过微信点餐支付,对于大部分餐厅来说,都已经成为常见的现象,小程序彻底融入了我们的生活,小程序也已经成为餐饮行业必备的工具.通过餐饮小程序,不仅可以让用户获 ...
微信小程序商城怎么在线制作
今天珍奶bb给大家简单唠唠微信小程序商城怎么在线制作的流程? 在唠微信小程序商城制作流程前,先给大家科普一下当前的实体经济环境是如何的?制作一个微信小程序商城是否存在它的必要性.不用看具体数据,就直接 ...
微信小程序：爱情保证书制作生成
这是一款开启保证数生成制作的一款小程序支持一键生成情侣爱情保证图只需输入你和另一半姓名,再加上时间即可一键生成然后长按就可以保存了安装方法: 使用微信开发者工具打开源码然后提交上传审核就可 ...

小程序＋动易SF制作随手拍实例全景式操作(1)

小程序＋动易SF制作随手拍实例全景式操作(1)相关推荐

最新文章

热门文章