2017-05-02 17:31:33 gao_xu_520 阅读数 100716
  • 微信小程序框架的制作

    讲解微信小程序开发所需要准备的注意事项;开发工具的下载;怎么创建和运行第一个微信小程序,以及如何改造;分析微信小程序的目录结构;app.json配置文件的详细分析;实战讲解微信小程序框架的制作!为你小程序的开发打下第一步基础!

    2268 人正在学习 去看看 黄菊华


<view class="container" class="zn-uploadimg">
	<button type="primary"bindtap="showok">消息提示框</button> 
	<button type="primary"bindtap="modalcnt">模态弹窗</button> 
	<button type="primary"bindtap="actioncnt">操作菜单</button> 
</view>

1.消息提示——wx.showToast(OBJECT)


//show.js
//获取应用实例  
var app = getApp()  
Page({
	showok:function() {
		wx.showToast({
		  	title: '成功',
		  	icon: 'success',
		  	duration: 2000
		})
	}
})

2.模态弹窗——wx.showModal(OBJECT)



//show.js
//获取应用实例  
var app = getApp()  
Page({
	modalcnt:function(){
		wx.showModal({
			title: '提示',
			content: '这是一个模态弹窗',
			success: function(res) {
				if (res.confirm) {
				console.log('用户点击确定')
				} else if (res.cancel) {
				console.log('用户点击取消')
				}
			}
		})
	}
})




3.操作菜单——wx.showActionSheet(OBJECT)


//show.js
//获取应用实例  
var app = getApp()  
Page({
	actioncnt:function(){
		wx.showActionSheet({
			itemList: ['A', 'B', 'C'],
			success: function(res) {
				console.log(res.tapIndex)
			},
			fail: function(res) {
				console.log(res.errMsg)
			}
		})
	}
})




4.指定modal弹出

   指定哪个modal,可以通过hidden属性来进行选择。

<!--show.wxml-->
<view class="container" class="zn-uploadimg">
	<button type="primary"bindtap="modalinput">modal有输入框</button> 
</view>
<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
    <input type='text'placeholder="请输入内容" auto-focus/>
</modal>


//show.js 
//获取应用实例  
var app = getApp()  
Page({
	data:{
        hiddenmodalput:true,
        //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
    },
	//点击按钮痰喘指定的hiddenmodalput弹出框
	modalinput:function(){
		this.setData({
		   hiddenmodalput: !this.data.hiddenmodalput
		})
	},
	//取消按钮
	cancel: function(){
        this.setData({
            hiddenmodalput: true
        });
    },
    //确认
    confirm: function(){
        this.setData({
	        hiddenmodalput: true
	    })
    }
    
})











2018-09-21 09:17:33 findhappy117 阅读数 631
  • 微信小程序框架的制作

    讲解微信小程序开发所需要准备的注意事项;开发工具的下载;怎么创建和运行第一个微信小程序,以及如何改造;分析微信小程序的目录结构;app.json配置文件的详细分析;实战讲解微信小程序框架的制作!为你小程序的开发打下第一步基础!

    2268 人正在学习 去看看 黄菊华

代码地址如下:
http://www.demodashi.com/demo/13982.html

一、前期准备工作:

软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。
  • 实现用户预约
  • 时间可选
  • 预约类型更具需求可自定义
2、案例目录结构

二、程序实现步骤:

1.预约index.wxml代码
	<!--index.wxml-->
	<view class="modals modals-bottom-dialog" hidden="{{hideModal}}"> 
    	<view class="modals-cancel" bindtap="hideModal"></view> 
    	<view class="bottom-dialog-body bottom-pos" animation="{{animationData}}">
        <view class="swiper-tab">   
          <scroll-view class="scroll-view_H" scroll-x>
            <view class='list' style='width:{{ width }}rpx'>
              <view bindtap="select" wx:for="{{ calendar }}" wx:for-item="item" wx:for-index="index" data-index="{{ index }}" class='listItem {{index == currentTab ? "current":""}}' wx:key='' data-date="{{ item.date}}">
                <text class='name'>{{ item.week }}</text>
                <text class='date'>{{ item.date }}</text>
              </view>
            </view>
          </scroll-view>
        </view>  
        <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:500rpx">  
          <swiper-item wx:for="{{ calendar }}" wx:key='' catchtouchmove="stopTouchMove"   >
            <!-- 作品 -->     
            <view class='time'>
              <view wx:for="{{ timeArr }}" wx:for-item="timeItem" wx:for-index="timeIndex" data-tindex="{{ timeIndex }}" data-time="{{ timeItem.time}}" bindtap='selectTime' class='listItem {{ currentTime == timeIndex ? "current":"" }}' wx:key=''>
                <text>{{ timeItem.time }}</text>
                <text>{{ timeItem.status }}</text>
              </view>
            </view>
          </swiper-item>    
        </swiper>
    	</view> 
    </view> 
    <button bindtap="showModal">点我预约</button>
2.预约index.wxss代码
/**index.wxss**/
/*模态框*/ 
.modals{
	position:fixed; 
	z-index: 999; 
	top:0; 
	left: 0; 
	right:0; 
	bottom: 0;
} 
.modals-cancel{
	position:absolute; 
	z-index:1000; 
	top:0; left: 0; 
	right:0; 
	bottom: 0; 
	background-color: rgba(0,0,0,.5);
} 
.bottom-dialog-body{
	position:absolute; 
	z-index:10001; 
	bottom:0; 
	left:0; 
	right:0; 
	height:600rpx; 
	background-color: #fff;
} 
/*动画前初始位置*/ 
.bottom-pos{
	-webkit-transform:translateY(100%);
	transform:translateY(100%);
}
/* pages/orderTime/index.wxss */
scroll-view{
  height: 128rpx;
 
  width: 100%;
}
scroll-view .list{
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
    width: 1302rpx; 
}
scroll-view .listItem{
  text-align: center;
  width: 186rpx;
  height: 128rpx;
  background-color: #f1f2f6;
  padding-top: 30rpx;
  box-sizing: border-box;
  /* float: left; */
  display: inline-block;
}
scroll-view .listItem text{
  display: block;
}
scroll-view .listItem .name{
  font-size: 30rpx;
}
scroll-view .listItem .date{
  font-size: 30rpx;
}
scroll-view .current{
  background-color: #76aef8;

}
scroll-view .current text{
  color: #fff;
}
.time{
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto;
  margin-top: 30rpx;
}
.time .listItem{
  width: 30%;
  height: 120rpx;
  text-align: center;
  box-sizing: border-box;
  background-color: #fff;
  padding-top: 20rpx;
  border: 1px solid #b9c1c8;
  border-radius: 50rpx;
  margin-left: 5%;
  margin-bottom: 20rpx;
}
.time .listItem:first-child{  
  margin-left: 0%;
}
.time .listItem:nth-child(4){  
  margin-left: 0%;
}
.time .listItem:nth-child(7){  
  margin-left: 0%;
}
.time .listItem text{
  display: block;
  font-size: 30rpx;
}
.time .current{
  border: 1px solid #76aef8;
}
.time .current text{
  color: #76aef8;
}

3.预约index.js逻辑代码

a.遮罩层的显示、隐藏

// 显示遮罩层 
  showModal: function () { 
    var that=this; 
    that.setData({ 
      hideModal:false 
    }) 
    var animation = wx.createAnimation({ 
      duration: 600,//动画的持续时间 默认400ms 数值越大,动画越慢 数值越小,动画越快 
      timingFunction: 'ease',//动画的效果 默认值是linear 
    }) 
    this.animation = animation 
    setTimeout(function(){ 
      that.fadeIn();//调用显示动画
    },200)
  },

  // 隐藏遮罩层 
  hideModal: function () {
    var that=this;
    var animation = wx.createAnimation({
      duration: 800,//动画的持续时间 默认400ms 数值越大,动画越慢 数值越小,动画越快 
      timingFunction: 'ease',//动画的效果 默认值是linear
    })
    this.animation = animation
    that.fadeDown();//调用隐藏动画
    setTimeout(function(){
      that.setData({ hideModal:true })
    },720)//先执行下滑动画,再隐藏模块
  },

b.底部弹出动画集

  //动画集
  fadeIn:function(){
    this.animation.translateY(0).step() 
    this.setData({
      animationData: this.animation.export()//动画实例的export方法导出动画数据传递给组件的animation属性
    })
  },
  fadeDown:function(){    this.animation.translateY(300).step()
    this.setData({
      animationData: this.animation.export(),
    })
  },

c.利用构造函数创建对象,限制要渲染的日历数据天数为7天以内(用户体验)

// 计算每月第一天是星期几
    function getFirstDayOfWeek(year, month) {
      return new Date(Date.UTC(year, month - 1, 1)).getDay();
    }
    const date = new Date();
    const cur_year = date.getFullYear();
    const cur_month = date.getMonth() + 1;
    const cur_date=date.getDate();
    const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
    //利用构造函数创建对象
    function calendar(date,week){
      this.date=cur_year+'-'+cur_month+'-'+date;
      if(date==cur_date){
        this.week = "今天";
      }else if(date==cur_date+1){
        this.week = "明天";
      }else{
        this.week = '星期' + week;
      }
    }
    //当前月份的天数
    var monthLength= getThisMonthDays(cur_year, cur_month)
    //当前月份的第一天是星期几
    var week = getFirstDayOfWeek(cur_year, cur_month)
    var x = week;
    for(var i=1;i<=monthLength;i++){
      //当循环完一周后,初始化再次循环
      if(x>6){
        x=0;
      }
      //利用构造函数创建对象
      that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
      x++;
    }
    //限制要渲染的日历数据天数为7天以内(用户体验)
    var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7)
    that.setData({
      calendar: flag
    })

d.点击tab切换,禁止手动滑动底部日期

/** 
   * 点击tab切换 
   */  
  swichNav: function( e ) {  
    var that = this;  
    if( this.data.currentTab === e.target.dataset.current ) {  
      return false;  
    } else {  
      that.setData( {  
        currentTab: e.target.dataset.current  
      })  
    }  
  },
  // 禁止手动滑动
  stopTouchMove: function() {
    return false;
  }

三、案例运行效果图:

微信小程序之底部弹框预约插件

代码地址如下:
http://www.demodashi.com/demo/13982.html

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

2018-09-14 11:04:34 wh_xmy 阅读数 9484
  • 微信小程序框架的制作

    讲解微信小程序开发所需要准备的注意事项;开发工具的下载;怎么创建和运行第一个微信小程序,以及如何改造;分析微信小程序的目录结构;app.json配置文件的详细分析;实战讲解微信小程序框架的制作!为你小程序的开发打下第一步基础!

    2268 人正在学习 去看看 黄菊华

弹出框和模态框的简介和使用方法如下:

<view class="container" class="zn-uploadimg">
	<button type="primary"bindtap="showok">消息提示框</button> 
	<button type="primary"bindtap="modalcnt">模态弹窗</button> 
	<button type="primary"bindtap="actioncnt">操作菜单</button> 
</view>

1.消息提示——wx.showToast(OBJECT)

 

//show.js
//获取应用实例  
var app = getApp()  
Page({
	showok:function() {
		wx.showToast({
		  	title: '成功',
		  	icon: 'success',
		  	duration: 2000
		})
	}
})


2.模态弹窗——wx.showModal(OBJECT)

 

//show.js
//获取应用实例  
var app = getApp()  
Page({
	modalcnt:function(){
		wx.showModal({
			title: '提示',
			content: '这是一个模态弹窗',
			success: function(res) {
				if (res.confirm) {
				console.log('用户点击确定')
				} else if (res.cancel) {
				console.log('用户点击取消')
				}
			}
		})
	}
})

 

3.操作菜单——wx.showActionSheet(OBJECT)

 

//show.js
//获取应用实例  
var app = getApp()  
Page({
	actioncnt:function(){
		wx.showActionSheet({
			itemList: ['A', 'B', 'C'],
			success: function(res) {
				console.log(res.tapIndex)
			},
			fail: function(res) {
				console.log(res.errMsg)
			}
		})
	}
})


 

 

4.指定modal弹出

   指定哪个modal,可以通过hidden属性来进行选择。

<!--show.wxml-->
<view class="container" class="zn-uploadimg">
	<button type="primary"bindtap="modalinput">modal有输入框</button> 
</view>
<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
    <input type='text'placeholder="请输入内容" auto-focus/>
</modal>

 

//show.js 
//获取应用实例  
var app = getApp()  
Page({
	data:{
        hiddenmodalput:true,
        //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
    },
	//点击按钮痰喘指定的hiddenmodalput弹出框
	modalinput:function(){
		this.setData({
		   hiddenmodalput: !this.data.hiddenmodalput
		})
	},
	//取消按钮
	cancel: function(){
        this.setData({
            hiddenmodalput: true
        });
    },
    //确认
    confirm: function(){
        this.setData({
	        hiddenmodalput: true
	    })
    }
    
})


 


 

2018-09-19 10:25:00 crabfrog 阅读数 518
  • 微信小程序框架的制作

    讲解微信小程序开发所需要准备的注意事项;开发工具的下载;怎么创建和运行第一个微信小程序,以及如何改造;分析微信小程序的目录结构;app.json配置文件的详细分析;实战讲解微信小程序框架的制作!为你小程序的开发打下第一步基础!

    2268 人正在学习 去看看 黄菊华

效果图

自定义弹出层

WXML

<view class='popup' wx:if="{{popShow}}">
    <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'>
    </view>
    <!--  弹出层 -->
      <view class='popup_main' id='popup_main' >
    <!--  关闭按钮 -->
        <view class='close_wrapper'>
          <image class='close_icon' src='/images/select_icons/close.png' mode='widthFix' bindtap='closePop'></image>
        </view>
    <!-- 主要内容 -->
        <view class='pop_list_wrapper'>这里加入你想加入的内容</view>
      </view>
  </view>

WXSS

    .popup {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
    }
    .mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .popup_main {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 85%;
      transform: translate(-50%, -50%);
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
      border: 5px;
      border-radius: 10px;
    }
    .close_wrapper {
      width: 100%;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .close_icon {
      width: 16px;
    }

JS

 data: {
/** 弹出层 **/
    popShow: false,
}

  /**
   * 弹出层
   */

  // 打开弹窗
    popupTap: function (e) {
    this.setData({
      popShow: true
    })
  },
  // 关闭弹窗
  closePop: function (e) {
    this.setData({
      popShow: false
    })
  },
  // 这个函数内容为空 用于阻止屏幕滚动
  preventTouchMove: function (e) {
  },
2018-02-07 12:29:50 xinghuowuzhao 阅读数 2184
  • 微信小程序框架的制作

    讲解微信小程序开发所需要准备的注意事项;开发工具的下载;怎么创建和运行第一个微信小程序,以及如何改造;分析微信小程序的目录结构;app.json配置文件的详细分析;实战讲解微信小程序框架的制作!为你小程序的开发打下第一步基础!

    2268 人正在学习 去看看 黄菊华


[html] view plain copy
  1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container" class="zn-uploadimg">  
  2.     <button type="primary"bindtap="showok">消息提示框</button>   
  3.     <button type="primary"bindtap="modalcnt">模态弹窗</button>   
  4.     <button type="primary"bindtap="actioncnt">操作菜单</button>   
  5. </view></span>  

1.消息提示——wx.showToast(OBJECT)


[html] view plain copy
  1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">//show.js  
  2. //获取应用实例    
  3. var app = getApp()    
  4. Page({  
  5.     showok:function() {  
  6.         wx.showToast({  
  7.             title: '成功',  
  8.             icon: 'success',  
  9.             duration: 2000  
  10.         })  
  11.     }  
  12. })  
  13. </span>  

2.模态弹窗——wx.showModal(OBJECT)



[html] view plain copy
  1. //show.js  
  2. //获取应用实例    
  3. var app = getApp()    
  4. Page({  
  5.     modalcnt:function(){  
  6.         wx.showModal({  
  7.             title: '提示',  
  8.             content: '这是一个模态弹窗',  
  9.             success: function(res) {  
  10.                 if (res.confirm) {  
  11.                 console.log('用户点击确定')  
  12.                 } else if (res.cancel) {  
  13.                 console.log('用户点击取消')  
  14.                 }  
  15.             }  
  16.         })  
  17.     }  
  18. })  




3.操作菜单——wx.showActionSheet(OBJECT)


[html] view plain copy
  1. //show.js  
  2. //获取应用实例    
  3. var app = getApp()    
  4. Page({  
  5.     actioncnt:function(){  
  6.         wx.showActionSheet({  
  7.             itemList: ['A', 'B', 'C'],  
  8.             success: function(res) {  
  9.                 console.log(res.tapIndex)  
  10.             },  
  11.             fail: function(res) {  
  12.                 console.log(res.errMsg)  
  13.             }  
  14.         })  
  15.     }  
  16. })  




4.指定modal弹出

   指定哪个modal,可以通过hidden属性来进行选择。

[html] view plain copy
  1. <!--show.wxml-->  
  2. <view class="container" class="zn-uploadimg">  
  3.     <button type="primary"bindtap="modalinput">modal有输入框</button>   
  4. </view>  
  5. <modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">  
  6.     <input type='text'placeholder="请输入内容" auto-focus/>  
  7. </modal>  


[html] view plain copy
  1. //show.js   
  2. //获取应用实例    
  3. var app = getApp()    
  4. Page({  
  5.     data:{  
  6.         hiddenmodalput:true,  
  7.         //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框  
  8.     },  
  9.     //点击按钮痰喘指定的hiddenmodalput弹出框  
  10.     modalinput:function(){  
  11.         this.setData({  
  12.            hiddenmodalput: !this.data.hiddenmodalput  
  13.         })  
  14.     },  
  15.     //取消按钮  
  16.     cancel: function(){  
  17.         this.setData({  
  18.             hiddenmodalput: true  
  19.         });  
  20.     },  
  21.     //确认  
  22.     confirm: function(){  
  23.         this.setData({  
  24.             hiddenmodalput: true  
  25.         })  
  26.     }  
  27.       
  28. })  






没有更多推荐了,返回首页