来自 电脑系统 2019-10-10 00:31 的文章
当前位置: 金沙澳门官网网址 > 电脑系统 > 正文

选择器多级联动,历史上的今天

不错,小程序的种种页面都急需.js/.json/.wxml/.wxss文件,就疑似前端 "三杀手"一样,这里是四剑客,但.json其实也是不屑一顾的,本质上照旧三杀手...关于小程序的话题相当的少说了,对小程序感兴趣的能够私信笔者谈谈哈。上面起初装逼。先从布局UI开端,约等于.wxml 和 .wxss(只交付多级联合浮动的部分)

一、 小程序相关知识 文件类型 目录结构 组件的行使 基本语法 相关API(Application Programming Interface)二、 开辟前希图三、 开拓实战分界面完成多少管理

能看出,里面涉及到了采纳器多级联合浮动。不过,上星期一的时候接手了集团的小程序,说是小程序,其实也就两四个页面,要本身把应用程式上的效果丰裕去,在那之中富含那么些“小编要投诉”的页面,综合了下安卓的选拔器效果,上面看小程序上做出后的效果与利益如下图:

数据管理

末尾只要获得 API 接口中的数据,并将其出示到分界面上就足以了。

//发送请求wx.request({ url: "https://www.ipip5.com/today/api.php?type=json", header: { "content-type": "application/x-www-form-urlencoded" }, method: 'POST', success: function  { try { that.setData({ items:res.data.result, dateOfToday: res.data.today }); } catch  { } wx.hideLoading(); }, fail: function  { console.log("error:" + err); wx.hideLoading;

终极源码如下:index页面

<!-- index.wxml --><!-- 顶部日期 start --><view style="width: 100%;height:100px;color:#67CDCD;font-size:44rpx;font-weight:bold;line-height:100px;text-align:center;"> {{dateOfToday}}</view><!-- 顶部日期 end --><!-- 中间分隔线 start --><view style="width:100%;height:1rpx;background-color:gray;"></view><!-- 中间分隔线 end --><!-- 底部滚动视图 start --><scroll-view style="width: 100%;height:{{scrollViewHeight}}px;" scroll-y> <view wx:for="{{items}}" wx:for-item="item" wx:for-index="idx"> <view style="height:1rpx;background-color:gray;margin:0 20rpx;"></view> <view style="height:100rpx;line-height:100rpx;padding-left:20rpx;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;" bindtap='viewDetail' data-year="{{item.year}}" data-title="{{item.title}}"> {{item.year}} {{item.title}} </view> </view></scroll-view><!-- 底部滚动视图 end -->

//index.jsPage({ data: { scrollViewHeight:200, dateOfToday:'', items:[] }, onLoad: function () { var that = this; //显示加载动画 wx.showLoading({ title: '正在加载', }); //获取屏幕高度 wx.getSystemInfo({ success: function  { console.log(res.windowHeight); that.setData({ scrollViewHeight: res.windowHeight - 100 }); } }); //获取当前日期 var myDate = new Date(); var dateStr = myDate.getFullYear() + '年' + (myDate.getMonth + '月' + myDate.getDate() + '日'; this.setData({ dateOfToday: dateStr }); //发送请求 wx.request({ url: "https://www.ipip5.com/today/api.php?type=json", header: { "content-type": "application/x-www-form-urlencoded" }, method: 'POST', success: function  { console.log("success:" + res); try { that.setData({ items:res.data.result, dateOfToday: res.data.today }); } catch  { } wx.hideLoading(); }, fail: function  { console.log("error:" + err); wx.hideLoading; }, viewDetail: function  { var title = e.currentTarget.dataset.title; var year = e.currentTarget.dataset.year; var url = '../detail/detail?title=' + title + '&year=' + year + '&date=' + this.data.dateOfToday; wx.navigateTo({ url: url }) },})

detail页面

<!--pages/detail/detail.wxml--><!-- 顶部日期 start --><view style="width: 100%;height:100px;color:#67CDCD;font-size:44rpx;font-weight:bold;line-height:100px;text-align:center;"> {{dateOfToday}}</view><!-- 顶部日期 end --><!-- 中间分隔线 start --><view style="width:100%;height:1rpx;background-color:gray;"></view><!-- 中间分隔线 end --><!-- 底部视图 start --><view style="width: 100%;height:{{viewHeight}}px;" > {{detail}}</view><!-- 底部视图 end -->

// pages/detail/detail.jsPage({ /** * 页面的初始数据 */ data: { dateOfToday:"", detail:"" }, /** * 生命周期函数--监听页面加载 */ onLoad: function  { console.log("options:" + options); var year = options.year; var date = options.date; var title = options.title; this.setData({ dateOfToday: year + "年" + date, detail: title }); }})

附:源码下载更加的多关于小程序的读书录制,可参看这里。如有错误,敬请批评指正!

金沙澳门官网网址 1iOS.gif

三、 开采实战
 <view > <view style=" display : flex;flex-direction : row;"> <text >选择购买门店:</text><text bindtap="cascadePopup" style= " color: #393939;font-size: 32rpx;margin-top : 2px; margin-left:8px;">{{areaSelectedStr}}></text> </view> <text style= " color: #393939;font-size: 32rpx;margin-top : 4px;margin-left:114px;">{{detailAddress}}</text> </view> //选择器 <view > <view bindtap="cascadeDismiss"></view> <view animation="{{animationData}}" > <view > <text >请选择门店</text> <text bindtap="cascadeDismiss">X</text> </view> <view > <text bindtap="changeCurrent" data-current="0">{{areaName}}</text> <text bindtap="changeCurrent" data-current="1">{{shopName}}</text> <text bindtap="changeCurrent" data-current="2">{{detailAddress}}</text> <view ></view> <swiper current="{{current}}" bindchange="currentChanged"> <block wx:if="{{area_arr.length > 0}}"> <swiper-item> <scroll-view scroll-y="true" > <view wx:for="{{area_arr}}" wx:key="index" data-index="{{index}}" bindtap="areaTapped"> <text wx:if="{{index == areaIndex}}" >{{item}}</text> <text wx:else>{{item}}</text> </view> </scroll-view> </swiper-item> </block> <block wx:if="{{shop_arr.length > 0}}"> <swiper-item> <scroll-view scroll-y="true" > <view wx:for="{{shop_arr}}" wx:key="index" data-index="{{index}}" bindtap="shopTapped"> <text wx:if="{{index == shopIndex}}" >{{item}}</text> <text wx:else>{{item}}</text> </view> </scroll-view> </swiper-item> </block> <block wx:if="{{detailAddress_tempArr.length > 0}}"> <swiper-item> <scroll-view scroll-y="true" > <view wx:for="{{detailAddress_tempArr}}" wx:key="index" data-index="{{index}}" bindtap="detailAddressTapped"> <text wx:if="{{index == detailIndex}}" >{{item}}</text> <text wx:else>{{item}}</text> </view> </scroll-view> </swiper-item> </block> </swiper> </view> </view></view>

.section{ background:white; margin:2px; padding:20rpx; display : flex; flex-direction : column;}.text{ color: #393939; font-size: 32rpx; margin-top : 2px;}/*跳出的选择器*/.modal-content { position: fixed; bottom: -285px; left: 0; width: 100%; height: 285px; /*box-shadow: 10rpx 0 30rpx rgba;*/ margin-top: 5px; background: #fff; z-index: 999;}/*遮罩层*/.modal-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .8; z-index: 99;}/*弹窗头部*/.modal-header { margin: 2px 0; font-size: 16px; color: #666; display: flex; flex-direction: row; justify-content: space-between; line-height: 30px;}/*所在地区字样*/.modal-title { text-align: center; width: 100%;}/*关闭按钮*/.modal-close { width: 20px;}.modal-body { font-size: 14px;}/*每级地区标题*/.viewpager-title { padding: 0 10px; /*color: #f03118;*/ line-height: 30px;}/*分隔线*/.viewpager-divider { width: 100%; height: 1px; background: #ccc;}/*左右滑动控件*/.swiper-area { height:220px;}/*地址列表ListView容器*/.viewpager-listview { padding-top: 5px; height: 100%;}/*每行地址item项*/.viewpager-listview view{ line-height: 30px; padding: 0 10px;}/*高亮当前所选地区*/.area-selected { color: red;}/*初始隐藏*/.hidden { display: none;}/*运行时显示*/.show { display: block;}

var UserInfo = require("../../../js/bean/UserInfo.js");var ApiUser = require("../../../js/http/ApiUser.js");var shopss = [];var detailAddress_arr = [];Page({ data: { //购买门店 current:0, //选择器第几页的标识,对应wxml中的current shopList:[], area_arr:[],//第一级的数据数组 area_id:[], shop_arr:[],//第二级的数据数组 shop_id:[], detailAddress_tempArr:[],//第三级的数据数组 areaSelectedStr: '请选择门店',//area_arr[index]+shop_arr[index] 用来显示于wxml中 maskVisual: 'hidden', areaName: '请选择',//显示于选择器上面部分的区域名 detailAddress:'可在小票上查看门店',//用来显示于wxml source: '' }, onLoad:function{ page = this; this.loadPreData();//加载选择器中的数据 }, //加载平台、门店、投诉类型loadPreData:function(){ var that = this; ApiUser.getpreData(function  { var userInfo = new UserInfo; if(userInfo.isOK{ if (userInfo.isSuccess{ //平台 //... //投诉类型 //... // 购买门店 var area_arr = [], area_id = []; userInfo.getData().shopsList.forEach(function{ area_arr.push; area_id.push; shopss.push; }) that.setData({ //... shopList:userInfo.getData().shopsList, area_arr:area_arr, area_id:area_id }) }else { wx.showModal({ title: '提示', content: userInfo.getMessage(), success: function { if (res.confirm) { console.log } } }) } }else { if(userInfo.is401{ wx.showModal({ title: '提示', content: '请先登录', success: function { if (res.confirm) { console.log } } }) }else if(userInfo.is404{ wx.showModal({ title: '提示', content: '页面找不到啦', success: function { if (res.confirm) { console.log } } }) }else if(userInfo.is500{ wx.showModal({ title: '提示', content: '服务器又开小差啦', success: function { if (res.confirm) { console.log } } }) }else{ wx.showModal({ title: '提示', content: userInfo.getMessage(), success: function { if (res.confirm) { console.log } } }) } } } ) }, //... //点击选择门店弹出选择器 cascadePopup: function() { var animation = wx.createAnimation({ duration: 500, timingFunction: 'ease-in-out', }); this.animation = animation; animation.translateY.step(); this.setData({ animationData: this.animation.export(), maskVisual: 'show' }); },//关闭选择器 cascadeDismiss: function () { this.animation.translateY.step(); this.setData({ animationData: this.animation.export(), maskVisual: 'hidden' }); }, //... //地址选择 areaTapped: function { // 标识当前点击第一级中的哪个区域,记录其名称与主键id都依赖它 var index = e.currentTarget.dataset.index; // current为1,使得页面向左滑动一页至商场列表 // areaIndex是商场数据的标识 if(this.data.area_arr[index] == '未知门店'){ this.setData({ areaName: this.data.area_arr[index], shopName: '', shop_arr:[], detailAddress:'暂无详细地址', detailAddress_tempArr:[], areaSelectedStr: this.data.area_arr[index] + ' ', }); this.cascadeDismiss(); }else{ this.setData({ areaName: this.data.area_arr[index], shopName: '', detailAddress:'选择门店后显示详细地址', areaIndex: index, shopIndex:-1 }); var that = this; //todo 商场列表赋值 var shop_arr = [], shop_id = []; shopss[index].forEach(function{ shop_arr.push(e.shopName); shop_id.push; detailAddress_arr.push(e.address); }) that.setData({ shopName:'请选择', shop_arr:shop_arr, shop_id: shop_id, }); that.setData({ current:1 }); } },//点击第二级的商场事件,同理上面点击第一级 shopTapped: function  { var index = e.currentTarget.dataset.index; this.setData({ shopIndex: index, shopName: this.data.shop_arr[index] }); var areaSelectedStr = this.data.areaName +" "+ this.data.shopName ; this.setData({ areaSelectedStr: areaSelectedStr, detailAddress:detailAddress_arr[index] }); var detailAddress_tempArr = []; detailAddress_tempArr.push(detailAddress_arr[index]); this.setData({ current:2, detailAddress_tempArr:detailAddress_tempArr }); },//点击第三级的详细地址事件,并关闭选择器 detailAddressTapped : function  { this.cascadeDismiss(); }, currentChanged: function  { // swiper滚动使得current值被动变化,用于高亮标记 var current = e.detail.current; this.setData({ current: current }); }, changeCurrent: function  { // 记录点击的标题所在的区级级别 var current = e.currentTarget.dataset.current; this.setData({ current: current }); }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }})
一、 小程序相关知识

金沙澳门官网网址 2小程序.gif先大致说下这几个页面包车型地铁所需文件,金沙澳门官网网址 3所需文件.png

分界面设计

在入手在此以前,先对小程序的分界面举行简要的规划。

金沙澳门官网网址 4home.png

点击首页中的每一类,可跳转到当年这一天的平地风波详细情况页面。

金沙澳门官网网址 5page_1.png

那上头的稿子是首先次写,恐怕可读性非常糟糕0.0 有啥样不懂的能够私信我。以上。

文件类型

小程序中的文件可分为4种项目,后缀名分别为“.wxml ”、“.wxss ”、“.js ”、“.json”。此中,后缀名字为 “wxml” 的公文为各类页面包车型大巴布局文件,描述页面所含有的具体内容,类似 Web 编制程序中的 html 文件。如以下新建项目标首页暗许代码:

<!--index.wxml--><view > <view > <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <block wx:else> <image bindtap="bindViewTap" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text >{{userInfo.nickName}}</text> </block> </view> <view > <text >{{motto}}</text> </view></view>

功能预览图:金沙澳门官网网址 6image.png

.wxss后缀的则临近css文件,语法上虽和css基本一样,但也做了一部分恢宏和修改:

  • 增加产量了尺寸单位“rpx”。“rpx”是微信小程序中css的尺码单位,可以依赖荧屏宽度进行自适应。
  • 提供了大局的体裁和一部分样式。项目中的 app.wxss 为全局样式文件,会功效于采用了该公文样式的兼具页面,而部分页面样式 page.wxss 仅对近些日子页不熟识效。
/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;}

金沙澳门官网网址 7image.png

js 文件用来管理程序的竞相和逻辑,如响应顾客的点击、获取客商的岗位、实行网络要求等等。在这之中的 Page()函数,用来登记二个页面,钦赐页面包车型地铁始发数据,其余还包含生命周期函数(onLoad、onReady、onShow、onHide、onUnload),事件管理函数(bindViewTap)等等。

//index.js//获取应用实例const app = getApp()Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse){ // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function { console.log app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }})

json文本为小程序的安插文件,分为page.json、app.json 和 project.config.json二种。

  • app.json——是对当前小程序的全局配置,如小程序的具备页面路线、导航栏背景颜色、网络超时时间、尾巴部分tab 菜单等。当中“pages”字段用于描述当前小程序有所页面路线;所有页面包车型地铁顶上部分背景颜色,文字颜色在window字段中定义;尾部tab 菜单则在“tabBar”中定义。
  • page.json——每个页面都会有个单身的布局文件,当某些页面要求张开本性化配置时,举个例子设置差异的导航栏背景观,则需在该页面包车型大巴json文件中开展安装。
  • project.config.json——项目标安插文件,个中保存的是开垦者对编写翻译器的性情化配置,举例分界面颜色、文字大小、编写翻译配置等等。
//app.json{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true}

近段日子由于直接沉迷英雄战迹无法自拔,在那先自我检讨...首先说下前日要做的要求:如下图,是近日给应用软件中增加的客诉功效。

分界面完毕

目录结构:新建项目后,首先要将本实例要求的具有页面成立出来。项目目录结构如下:

金沙澳门官网网址 8image.png

导航栏标题:导航栏的标题可在“app.json”文件中开展设置,将 “window”-“navigationBarTitleText” 更换为“历史上的前几天”。代码如下:

//app.json{ "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "历史上的今天", "navigationBarTextStyle": "black" }}

首页:方方面面页面分为上、下两大一些,分别为上方的“日期”及下方的“事件列表”,中间使用分隔线隔绝。由于下边包车型大巴风云列表是可以滚动的(当当天风云丰裕多的时候),因而要求用到scroll-view。

此时index.wxml的代码如下:

<view style="width: 100%;height:100px;background-color: red;"></view><scroll-view style='width: 100%;height:300px;background-color:blue;' scroll-y></scroll-view>

效果与利益预览图如下:

金沙澳门官网网址 9image.png

此地有贰个主题素材就算,头部的轮转视图必要占用全部的结余中度,但是由于客商的不一致,各类机型的显示屏宽高是不雷同的,因而要求动态总结小程序的可利用窗口中度,再减去最上端的新民主主义革命视图中度,就可以猎取滚动视图的惊人。

<!-- index.wxml --><view style="width: 100%;height:100px;background-color: red;"></view><scroll-view style='width: 100%;height:{{scrollViewHeight}}px;background-color:blue;' scroll-y></scroll-view>

//index.jsPage({ data: { scrollViewHeight:200 }, onLoad: function () { var that=this; //获取屏幕高度 wx.getSystemInfo({ success: function  { that.setData({ scrollViewHeight: res.windowHeight - 100 }); } }); }})

成效预览图:

金沙澳门官网网址 10image.png

onLoad函数中因故要用 “var that=this”,是因为在 javascript 语言中,this代表着脚下的目的,它在前后相继中趁着试行的上下文任何时候会变卦。在本例中回调函数对象相对于getSystemInfo点击事件函数对象已经发生了转换。所以已经不是原来的页面前遭受象了。消除的办法正是复制一份当前的对象。所以我们有了这么些重大的话语:

var that=this;//把this对象复制到临时变量that.

金沙澳门官网网址 ,接下来增加下方“事件列表”部分的代码:index.wxml 页面代码如下:

<!-- index.wxml --><!-- 顶部日期 start --><view style="width: 100%;height:100px;color:#67CDCD;font-size:44rpx;font-weight:bold;line-height:100px;text-align:center;"> 13月32日</view><!-- 顶部日期 end --><!-- 中间分隔线 start --><view style="width:100%;height:1rpx;background-color:gray;"></view><!-- 中间分隔线 end --><!-- 底部滚动视图 start --><scroll-view style="width: 100%;height:{{scrollViewHeight}}px;" scroll-y> <view wx:for="{{[1,2,3,4,5,6,7,8,9,10]}}" wx:for-item="item" wx:for-index="idx"> <view style="height:1rpx;background-color:gray;margin:0 20rpx;"></view> <view style="height:100rpx;line-height:100rpx;padding-left:20rpx;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;" bindtap='viewDetail' data-year="{{item.year}}" data-title="{{item.title}}"> 2030年, iPhone 30 正式发布 </view> </view></scroll-view><!-- 底部滚动视图 end -->

金沙澳门官网网址 11微信图片_20180119213450.jpg

点击各类事件,可跳转到凸显事件详细情况的detail页面。detail.wxml 页面代码如下:

<!--pages/detail/detail.wxml--><!-- 顶部日期 start --><view style="width: 100%;height:100px;color:#67CDCD;font-size:44rpx;font-weight:bold;line-height:100px;text-align:center;"> 2030年13月32日</view><!-- 顶部日期 end --><!-- 中间分隔线 start --><view style="width:100%;height:1rpx;background-color:gray;"></view><!-- 中间分隔线 end --><!-- 底部视图 start --><view style="padding:20rpx;height:{{viewHeight}}px;" > iPhone 30 正式发布</view><!-- 底部视图 end -->

金沙澳门官网网址 12微信图片_20180119225935.jpg

基本语法

① 变量定义及利用小程序中的变量定义在对应页面 js 文件里的 Page - data 中,在wxml页面使用的时候需用双大括号包裹起来。如下所示:

<!--pages/variable/variable.wxml--><view style='width:100%;margin-top:100px;text-align:center;'> <text>当前时间:{{curTime}}</text> <button type="primary" style='margin:50rpx;' bindtap='refreshTime'>点击更新时间</button></view>

// pages/variable/variable.jsPage({ data: { curTime:"" }, refreshTime: function () { var now = new Date(); var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); var time = h + ':' + m + ':' + s; //改变变量的值 this.setData({ curTime:time }); },})

功效预览图如下:

金沙澳门官网网址 132.gif

② for循坏当需求达成类似列表的效劳时,可在组件上运用 “wx:for” 语句来重新渲染。默许数组的当下项的下标变量名默感觉index,数组当前项的变量名默感觉item,当然也足以改成温馨想要使用的变量名,如:wx:for-item="phone" wx:for-index="idx" 。

<!--pages/for/for.wxml--><view wx:for="{{['苹果','华为','小米','魅族']}}" wx:for-item="phone" wx:for-index="idx" style="text-align:center;margin-top:50px;font-size:30px;"> {{phone}}</view>

金沙澳门官网网址 14image.png

③ 点击事件在组件起头标签中加上“ bindtap="click" ”,并在js函数中贯彻该方式,可为其增添点击事件。

<button type="primary" style='margin:50rpx;' bindtap='click' >点击事件</button>

传参:当需求获得点击对象的少数属性数据时,可在其最早标签中丰盛“data-参数名="参数值"”,然后在点击事件中动用“e.currentTarget.dataset.参数名”获取相应的值。示例代码:

<!--pages/click/click.wxml--><view style='width:100%;margin-top:100px;text-align:center;'> <text>这是:{{name}}</text> <button type="primary" style='margin:50rpx;' bindtap='click' data-phone="iPhone">苹果</button> <button type="primary" style='margin:50rpx;' bindtap='click' data-phone="Huawei">华为</button> <button type="primary" style='margin:50rpx;' bindtap='click' data-phone="Xiaomi">小米</button></view>

// pages/click/click.jsPage({ data: { name:"" }, click:function{ var phone = e.currentTarget.dataset.phone; this.setData({ name:phone }); }})

成效预览图:金沙澳门官网网址 156.gif

本文由金沙澳门官网网址发布于电脑系统,转载请注明出处:选择器多级联动,历史上的今天

关键词: