Chinaunix首页 | 论坛 | 博客
  • 博客访问: 569124
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: 其他平台

2019-01-21 16:31:14

1.模态框

点击(此处)折叠或打开

  1. <!--pages/model/model.wxml-->
  2. <view class='container' catchtap='click'>点击</view>
  3. <view class='model' style='{{cc}}'>
  4.  <view class="modal-button" style="width:100%">
  5.     <view style="color:green;border-right:1px solid #E5E7ED;" bindtap="touchAddNew">确定</view>
  6.     <view bindtap="touchCancel">取消</view>
  7.   </view>

  8. </view>


点击(此处)折叠或打开

  1. /* pages/model/model.wxss */
  2. .container{
  3.   padding: 20rpx;
  4.   font-size: 30rpx;
  5.   background: red;
  6.   color: #fff;
  7. }
  8. .model{
  9.    position: fixed;
  10.     top: 0;
  11.     left: 0;
  12.     bottom: 0;
  13.     right: 0;
  14.     background: rgba(0, 0, 0, .5);
  15.     z-index: 99999;
  16.     opacity: 0;
  17.     transition: opacity 400ms ease-in;
  18.     pointer-events: none;
  19.     display: flex;
  20.     justify-content: center;
  21.     align-items: center;

  22. }
  23. .modal-button {
  24.     height: 100rpx;
  25.     margin-bottom: 0;
  26.     display: flex;
  27.     flex-direction: row;
  28.     justify-content: space-between;
  29.     background: #fff;
  30. }

  31. .modal-button view {
  32.     width: 50%;
  33.     border-top: 1px solid #E5E7ED;
  34.     display: flex;
  35.     justify-content: center;
  36.     align-items: center;
  37. }

点击(此处)折叠或打开

  1. // pages/model/model.js
  2. Page({

  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.    cc:'',
  8.   },

  9.   /**
  10.    * 生命周期函数--监听页面加载
  11.    */
  12.   onLoad: function (options) {

  13.   },

  14.   /**
  15.    * 生命周期函数--监听页面初次渲染完成
  16.    */
  17.   onReady: function () {

  18.   },

  19.   /**
  20.    * 生命周期函数--监听页面显示
  21.    */
  22.   onShow: function () {

  23.   },

  24.   /**
  25.    * 生命周期函数--监听页面隐藏
  26.    */
  27.   onHide: function () {

  28.   },

  29.   /**
  30.    * 生命周期函数--监听页面卸载
  31.    */
  32.   onUnload: function () {

  33.   },

  34.   /**
  35.    * 页面相关事件处理函数--监听用户下拉动作
  36.    */
  37.   onPullDownRefresh: function () {

  38.   },

  39.   /**
  40.    * 页面上拉触底事件的处理函数
  41.    */
  42.   onReachBottom: function () {

  43.   },

  44.   /**
  45.    * 用户点击右上角分享
  46.    */
  47.   onShareAppMessage: function () {

  48.   },
  49.   click:function(e){
  50.     var _this =this;
  51.     console.log("点击事件成功");
  52.     _this.setData({
  53.       cc:'opacity:1;pointer-events:auto;'
  54.     })
  55.   },
  56.   touchAddNew:function(){
  57.     var _this = this;
  58.     console.log(123)
  59.     _this.setData({
  60.       cc: ' '
  61.     })
  62.   },
  63.   touchCancel:function(){
  64.     var _this = this;
  65.     console.log(456)
  66.     _this.setData({
  67.       cc: ''
  68.     })
  69.   }
  70. })
2 swiper

点击(此处)折叠或打开

  1. /* pages/swiper/swiper.wxss */
  2. .wx-swiper-dot-active{
  3.   width: 30px !important;
  4.   /* border-radius: 10px !important; */
  5.   border-radius:0px !important;
  6. }
  7. .wx-swiper-dot-active{
  8.   width: 30px !important;
  9.   /* border-radius: 10px !important; */
  10.   border-radius:0px !important;
  11. }
  12. .wx-swiper-dot{
  13.    width: 30px !important;
  14.   /* border-radius: 10px !important; */
  15.   border-radius:0px !important;
  16. }


3随机颜色

点击(此处)折叠或打开

  1. <view class='box'style=" background: linear-gradient({{rotate}}deg,#{{color1}},#{{color2}},#{{color3}})" ></view>
  2. <button open-type="share">分享</button>
  3. <view class='dianji' catchtap='click'></view>


点击(此处)折叠或打开

  1. mdc_changeColor:function(){
  2.     var _this= this
  3.     var colorArr=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
  4.     var timer = setInterval(function () {
  5.       var color1 = "";
  6.       var color2 = "";
  7.       var color3 = "";
  8.       var rotate = "";
  9.     
  10.     for(var i=0;i<6;i++){
  11.       color1 += colorArr[parseInt(Math.random(colorArr) * 16)]
  12.       // console.log(color1);
  13.     }
  14.     for (var i = 0; i < 6; i++) {
  15.       color2 += colorArr[parseInt(Math.random(colorArr) * 16)]
  16.       // console.log(color2);
  17.     }
  18.     for (var i = 0; i < 6; i++) {
  19.       color3 += colorArr[parseInt(Math.random(colorArr) * 16)]
  20.     }
  21.      _this.setData({
  22.       color1: color1,
  23.       color2: color2,
  24.       color3: color3,
  25.       rotate:parseInt(Math.random()*360)
  26.     })
  27.     }, 700)
  28.   },




阅读(1496) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册