我的创作纪念日

最新推荐文章于 2024-07-25 16:59:28 发布

clearlovel

最新推荐文章于 2024-07-25 16:59:28 发布

阅读量71

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/clearlovel/article/details/131997473

版权

机缘

提示：可以和大家分享最初成为创作者的初心
例如：

实战项目中的经验分享
日常学习过程中的记录
通过文章进行技术交流
…

收获

提示：在创作的过程中都有哪些收获
例如：

获得了多少粉丝的关注
获得了多少正向的反馈，如赞、评论、阅读量等
认识和哪些志同道合的领域同行
学无止境，前期确实是菜，没办法，只能勤能补拙多练多做
强者从不抱怨环境

日常

提示：当前创作和你的工作、学习是什么样的关系
例如：

创作是否已经是你生活的一部分了
有限的精力下，如何平衡创作和工作学习
多加学习别人的代码，把别人的代码转换为自己的代码
勤加多练，久而久之自己也会有一定的基础，努力变强

成就

提示：你过去写得最好的一段代码是什么？请用代码块贴出来
例如：

js代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    showIndex:null,//打开弹窗的对应下标
    height:'',//屏幕高度
  },
  // 打开弹窗
  openPopup(e){
    var index = e.currentTarget.dataset.index;
    this.setData({
      showIndex:index
    })
  },
  //关闭弹窗
  closePopup(){
    this.setData({
      showIndex:null
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    var that = this;
    // 动态获取屏幕高度
    wx.getSystemInfo({
      success: (result) => {
        that.setData({
          height: result.windowHeight
        });
      },
    })
  },
})

wxml代码


<button type="primary" bindtap="openPopup" data-index="1">打开中间弹窗</button>

<!-- 中间弹窗 -->
<view class="popup-box" wx:if="{{showIndex=='1'}}" bindtap="closePopup"></view> 
<view class="info-center" style="top:{{height*0.3}}px;height:{{height*0.4}}px;"
wx:if="{{showIndex=='1'}}">
  <view>
    <view class="row-info">
      <view>
        <text class="line left-line"></text>
        <text>请选择业务领域</text>
        <text class="line right-line"></text>
      </view>
      <button>两客一危</button>
   <button>汽车维修企业</button>
   <button>驾驶员培训</button>
    </view>
    <view class="row-btn">
      <!-- <view class="left-btn" bindtap="closePopup">取消</view> -->
      <view class="right-btn">确认</view>
    </view>
  </view>
</view>

wxss代码

/* 蒙层 */
.popup-box{
  position: absolute;
  z-index: 99;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

/* 中 */
.info-center{
  position: fixed;
  z-index: 999;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}
/* 自定义内容（根据自己需求更改,可删除） */
button{
  margin: 15rpx 0;
}
.row-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15rpx;
  font-size: 32rpx;
}
.row-info view{
  padding: 10rpx 0;
}
.row-info view:first-child{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.line{
  width: 100rpx;
  height: 1rpx;
}
.left-line{
  background-image: linear-gradient(to left,orange,white);
}
.right-line{
  background-image: linear-gradient(to right,orange,white);
}
.row-author{
  font-size: 24rpx;
  color: gray;
}
.row-btn{
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: 1rpx dashed #f1f1f1;
}
.row-btn view{
  flex: 1;
  text-align: center;
  margin: 20rpx 10%;
  padding: 12rpx 0;
  font-size: 32rpx;
  border-radius: 10rpx;
}
.left-btn{
  background-color: #f1f1f1;
  color: #33ccff;
}
.right-btn{
  background-color: #33ccff;
  color: white;
}
.fixed{
  position: fixed;
  bottom: 0;
  width: 50%;
}