微信小程序常用样式，特效，方法

最新推荐文章于 2024-08-05 21:49:05 发布
最新推荐文章于 2024-08-05 21:49:05 发布
阅读量1.7k 收藏 17
点赞数 2
分类专栏： 笔记 文章标签： 微信小程序 小程序 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44663761/article/details/122382953
版权
1.购物车算钱

wxml

<view class="cart-box">
        <view class="item" wx:for="{{list}}" wx:key="list">
                <icon type="{{item.select}}" size="26" data-index="{{index}}" data-select="{{item.select}}" bindtap="change"/>
                <image src="{{item.url}}" class="goods-img" mode="widthFix"></image>
                <view class="goods-info">
                      <view class="row">
                           <view class="goods-name">{{item.name}}</view>
                           <text class="goods-price">￥{{item.price}}</text>
                      </view>
                      <view class="goods-type">
                              {{item.style}}
                      </view>
                      <view class="num-box">
                            <view class="btn-groups">
                                    <button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button>
                                      <view class="num">{{item.num}}</view>
                                      <button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>
                            </view>
                      </view>
                </view>
        </view>
</view>
<view class="cart-fixbar">
       <view class="allSelect">
            <icon type="{{allSelect}}" size="26" data-select="{{allSelect}}" bindtap="allSelect"/>
            <view class="allSelect-text">全选</view>
       </view>
       <view class="count">
           <text>合计：￥</text>{{count}}
       </view>
       <view class="order">
          去结算<text class="allnum">({{num}})</text>
       </view>
</view>

css

page{
  background: #000;
}
.cart-box .item{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  background: #222;
  border-bottom: 1px solid #555;
}
.cart-box .item .goods-info{
  margin-left: 20rpx;
}
.cart-box .goods-img{
  width: 160rpx;
   margin-left: 20rpx;
}
.cart-box .row{
  color: #fff;
  display: flex;
  flex-direction: row;
  width: 430rpx;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.cart-box .goods-name{
  font-size: 32rpx;
  width: calc(100% - 100rpx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-box .goods-price{
  font-size: 32rpx;
}
.cart-box .goods-type{
  color: #999;
  font-size: 24rpx;
  margin-bottom: 20rpx;
}
.cart-box .num-box{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.cart-box .goods-btn{
  width: 60rpx;
  height: 60rpx;
  padding: 0;
  line-height: 60rpx;
  font-weight: bold;
  color: #999;
  margin: 0;
  background: #333;
}
.cart-box .num{
  color: #999;
  width: 60rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 24rpx;
}
.cart-box .btn-add{
  font-size: 50rpx;
}
.cart-box .btn-minus{
  font-size: 28rpx;
}
.cart-box .btn-groups{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    border: 1px solid #222;
    border-radius: 10rpx;
}
.cart-fixbar{
  position: fixed;
  bottom: 0;
  background: #333;
  height: 100rpx;
  width: 100%;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cart-fixbar .allSelect{
  display: flex;
  flex-direction: row;
  height: 100rpx;
  align-items: center;
  color: #fff;
  font-size: 32rpx;
}
.cart-fixbar .allSelect-text{
  margin-left: 20rpx;
}
.cart-fixbar .count{
  margin-left: 80rpx;
  color: #fff;
  font-size: 36rpx;
}
.cart-fixbar .order{
  color:#fff;
  height: 100rpx;
  background: #222;
  line-height: 100rpx;
  position: absolute;
  right: 0;
  padding: 0 40rpx;
  font-size: 32rpx;
}
.cart-fixbar .allnum{
  font-size: 24rpx;
}

js

Page({
  data: {
    list:[{
      code:"0001",
      name:"无人机",
      url:"http://i1.mifile.cn/a1/pms_1487824962.01314237!220x220.jpg",
      style:"低配版",
      price:"4999",
      select:"circle",
      num:"1"
    },
    {
      code: "0002",
      name: "智能手环",
      url: "http://i1.mifile.cn/a1/pms_1467962689.97551741!220x220.jpg",
      style: "2代",
      price: "149",
      select: "circle",
      num: "1"
    },{
      code: "0003",
      name: "指环支架",
      url: "http://i2.mifile.cn/a1/pms_1482221011.26064844.jpg",
      style: "金色",
      price: "19",
      select: "circle",
      num: "1"
    }],
    allSelect:"circle",
    num:0,
    count:0
  },
  //改变选框状态
  change:function(e){
    var that=this
    //得到下标
    var index = e.currentTarget.dataset.index
    //得到选中状态
    var select = e.currentTarget.dataset.select
    
    if(select == "circle"){
       var stype="success"
    }else{
       var stype="circle"
    }
    
    //把新的值给新的数组
   var newList= that.data.list
   newList[index].select=stype
    //把新的数组传给前台
    that.setData({
      list:newList
    })
    //调用计算数目方法
    that.countNum()
    //计算金额
    that.count()
  },
  //加法
  addtion:function(e){
    var that=this
    //得到下标
    var index = e.currentTarget.dataset.index
    //得到点击的值
    var num = e.currentTarget.dataset.num
    //默认99件最多
    if(num<100){
      num++
    }
    //把新的值给新的数组
    var newList = that.data.list
    newList[index].num =num
   
    //把新的数组传给前台
    that.setData({
      list: newList
    })
    //调用计算数目方法
    that.countNum()
    //计算金额
    that.count()
  },
  //减法
subtraction:function(e){
  var that = this
  //得到下标
  var index = e.currentTarget.dataset.index
  //得到点击的值
  var num = e.currentTarget.dataset.num
  //把新的值给新的数组
  var newList = that.data.list
  //当1件时，点击移除
  if (num == 1) {
      newList.splice(index,1)
  }else{
    num--
    newList[index].num = num
  }
  
  //把新的数组传给前台
  that.setData({
    list: newList
  })
  //调用计算数目方法
  that.countNum()
  //计算金额
  that.count()
},
//全选
allSelect:function(e){
  var that=this
  //先判断现在选中没
  var allSelect = e.currentTarget.dataset.select
  var newList = that.data.list
  if(allSelect == "circle"){
    //先把数组遍历一遍，然后改掉select值
    for (var i = 0; i < newList.length; i++) {
      newList[i].select = "success"
    }
    var select="success"
  }else{
    for (var i = 0; i < newList.length; i++) {
      newList[i].select = "circle"
    }
    var select = "circle"
  }
  that.setData({
    list:newList,
    allSelect:select
  })
  //调用计算数目方法
  that.countNum()
  //计算金额
  that.count()
},
//计算数量
countNum:function(){
  var that=this
  //遍历数组，把既选中的num加起来
  var newList = that.data.list
  var allNum=0
  for (var i = 0; i < newList.length; i++) {
        if(newList[i].select=="success"){
          allNum += parseInt(newList[i].num) 
        }
  }
  parseInt
  console.log(allNum)
  that.setData({
    num:allNum
  })
},
//计算金额方法
count:function(){
  var that=this 
  //思路和上面一致
  //选中的订单，数量*价格加起来
  var newList = that.data.list
  var newCount=0
  for(var i=0;i<newList.length;i++){
    if(newList[i].select == "success"){
      newCount += newList[i].num * newList[i].price
    }
  }
  that.setData({
    count:newCount
  })
}
})
2.列表点赞
<block wx:for="{{wishList}}" wx:key="{{index}}">
  <view class="item" data-index='{{item.id}}'>
    <view class='wish_list_box_collection' wx:if="{{item.collected==1}}">
      <!-- 点赞过 -->
      <image catchtap='onCollectionTap' src="../../images/icon/wardrobe.png" data-index='{{index}}'></image>
      <text>{{item.dzzs}}</text>
    </view>
    <view class='wish_list_box_collection' wx:else>
      <!-- 未点赞 -->
      <image src='../../images/icon/wx_app_like.png' catchtap='onCollectionTap' data-index='{{index}}'></image>
      <text>{{item.dzzs}}</text>
    </view>
  </view>
</block>


.item {
  padding: 20rpx;
  border: 1rpx solid red;
}
 
.wish_list_box_collection image {
  width: 40rpx;
  height: 40rpx;
  overflow: hidden;
}


data: {
    wishList: [
      {dzzs: '22', collected: 1, id: 1},
      {dzzs: '33', collected: 0, id: 2},
      {dzzs: '44', collected: 1, id: 3},
      {dzzs: '555', collected: 1, id: 4},
      {dzzs: '666', collected: 0, id: 5},
      {dzzs: '777', collected: 0, id: 6}
    ],
  },


// 更改点赞状态
  onCollectionTap: function(event) {
    // 获取当前点击下标
    var index = event.currentTarget.dataset.index;
    // data中获取列表
    var message = this.data.wishList;
    for (let i in message) { //遍历列表数据
      if (i == index) { //根据下标找到目标
        var collectStatus = false
        if (message[i].collected == 0) { //如果是没点赞+1
          collectStatus = true
          message[i].collected = parseInt(message[i].collected) + 1
          message[i].dzzs = parseInt(message[i].dzzs) + 1
        } else {
          collectStatus = false
          message[i].collected = parseInt(message[i].collected) - 1
          message[i].dzzs = parseInt(message[i].dzzs) - 1
        }
        wx.showToast({
          title: collectStatus ? '收藏成功' : '取消收藏',
        })
      }
    }
    this.setData({
      wishList: message
    })
  }
3.多图上传
<view class="weui-cell">
  <view class="weui-cell__bd">
    <view class="weui-uploader">
      <view class="weui-uploader__hd">
        <view class="weui-uploader__title">点击可预览选好的图片</view>
        <view class="weui-uploader__info">{{pics.length}}/9</view>
      </view>
      <view class="weui-uploader__bd">
        <view class="weui-uploader__files">
          <block wx:for="{{pics}}" wx:for-item="image">
            <view class="weui-uploader__file">
              <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
            </view>
          </block>
        </view>
        <-- isShow 这个是判断是否进行触发点隐藏操作-->
        <view class="weui-uploader__input-box {{isShow?'true':'hideTrue'}}">
          <view class="weui-uploader__input" bindtap="chooseImage"></view>
        </view>
      </view>
    </view>
  </view>
</view>


page {
  line-height: 1.6;
  font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
icon {
  vertical-align: middle;
}
.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.weui-cell_input {
  padding-top: 0;
  padding-bottom: 0;
}
.weui-uploader__hd {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-bottom: 10px;
  align-items: center;
}
.weui-uploader__title {
  flex: 1;
}
.weui-uploader__info {
  color: #b2b2b2;
}
.weui-uploader__bd {
  margin-bottom: -4px;
  margin-right: -9px;
  overflow: hidden;
}
.weui-uploader__file {
  float: left;
  margin-right: 9px;
  margin-bottom: 9px;
}
.weui-uploader__img {
  display: block;
  width: 79px;
  height: 79px;
}
.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 77px;
  height: 77px;
  border: 1px solid #d9d9d9;
}
.weui-uploader__input-box:before, .weui-uploader__input-box:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}
.weui-uploader__input-box:before {
  width: 2px;
  height: 39.5px;
}
.weui-uploader__input-box:after {
  width: 39.5px;
  height: 2px;
}
.weui-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.hideTrue {
  display: none
}


Page({
  data: {
    pics: [],
    count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    isShow: true
  },
  onLoad: function (options) {
    // 生命周期函数--监听页面加载
    isShow: (options.isShow == "true" ? true : false)
  },
  // 图片上传
  chooseImage: function () {
    var _this = this,
      pics = this.data.pics;
    wx.chooseImage({
      count: 9 - pics.length, // 最多可以选择的图片张数，默认9
      sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
      sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
      success: function (res) {
        // success
        var imgSrc = res.tempFilePaths;
        pics = pics.concat(imgSrc);
        // 控制触发添加图片的最多时隐藏
        if (pics.length >= 9) {
          _this.setData({
            isShow : (!_this.data.isShow)
          })   
        }else {
          _this.setData({
            isShow: (_this.data.isShow)
          })  
        }
        _this.setData({
          pics: pics
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  // 图片预览
  previewImage: function (e) {
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.pics
    })
  }
})
4.导航栏切换

<!--导航条-->
<view class="navbar">
  <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
 
<!--首页-->
<view hidden="{{currentTab!==0}}">
  tab_01
</view>
 
<!--搜索-->
<view hidden="{{currentTab!==1}}">
  tab_02
</view>
 
<!--我-->
<view hidden="{{currentTab!==2}}">
  tab_03
</view>


page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.navbar{
  flex: none;
  display: flex;
  background: #fff;
}
.navbar .item{
  position: relative;
  flex: auto;
  text-align: center;
  line-height: 80rpx;
}
.navbar .item.active{
  color: #FFCC00;
}
.navbar .item.active:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: #FFCC00;
}


var app = getApp()
Page({
  data: {
    navbar: ['首页', '搜索', '我'],
    currentTab: 0
  },
  navbarTap: function(e){
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  }
})
5.滑动导航栏切换
 <!--导航条--> 
<view class="top-news">
      <view class="nav-scroll">
        <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
        
               <text wx:for="{{section}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="id" bindtap="navbarTap" id="{{item.id}}">{{item.name}}</text>
        </scroll-view>
      </view>
</view>
<!--白酒-->
<view hidden="{{currentTab!==0}}">
  tab_01
</view>
 
<!--果酒-->
<view hidden="{{currentTab!==1}}">
  tab_02
</view>
 
<!--农产品-->
<view hidden="{{currentTab!==2}}">
  tab_03
</view>


/*导航*/
.top-news{
  background-color: #fff;
  width:100%;height: 110rpx;
border-bottom:1px solid #404040;
/* position: fixed;top:0;
left:0; */
z-index: 999;
overflow: hidden;
/* background: linear-gradient(to right,#f3f3f3,#fff,#f3f3f3); */
 }
.scroll-view_H{
  white-space:nowrap;
  width: 100%;
padding-left: 16rpx;
box-sizing: border-box;
}
/* .nav-name{display:inline-block;font-size:32rpx;color: #2b2e33;border-bottom: 2px solid transparent;padding:20rpx;} */
.item{
display:inline-block;
font-size:32rpx;
color: #404040;
border-bottom: 2px solid transparent;
padding:20rpx 30rpx;
}
/* .nav-hover{color: #349393;border-bottom: 2px solid #f06000;} */
.active{
  color: #404040;
  border-bottom: 2px solid #404040;
  }


data: {
    section: [

    
  { name: '白酒', id: '1001' },
 { name: '果酒', id: '1032' },

      { name: '农产品', id: '1003' },
 { name: '其他商品', id: '1004' },
  
    { name: '电影', id: '1005' }, 
{ name: '少儿', id: '1021' },
  
    { name: '少儿', id: '1021' }
   
 ],
   

  currentTab: 0
 
 },
 
 navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    });
 
  },
6.二级滑动导航栏切换
<!--pages/channel/c_management/index.wxml-->
<view class='nav_header'>
<view class="navbar">
  <view class='add'></view>
  <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
  <view class='add_1'>+</view>
</view>
</view>


 
 <!--商品列表-->
<view hidden="{{currentTab!==0}}">
<view class="top-news">
      <view class="nav-scroll">
        <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
               <text wx:for="{{section}}" data-idx="{{index}}" class="item_1 {{currentTab1==index ? 'active_1' : ''}}" wx:key="id" bindtap="navbarTap_1" id="{{item.id}}">{{item.name}}</text>
        </scroll-view>
      </view>
</view>


<!--所有商品1-->
<view hidden="{{currentTab1!==0}}">
<view class='box_list'>

<view class='box_list_group'>
<view class='list_top'>
<view class='list_left'><image src='img/header_bg.png'></image></view>
<view class='list_right'>
<view class='shop_text_1'>坚果坚果坚果坚果坚果坚果坚坚果坚果坚果坚果坚果坚果坚果坚果坚果</view>
<view class='shop_text_2'>￥1020/份</view>
<view class='shop_text_3'>库存：   不限库存</view>
<view class='shop_text_4'>销量： 0</view>
</view>
<view class='clear_both'></view>
</view>
<view class='list_bottom'>
<view class='box_flex'>删除</view>
<view class='box_flex'>清除</view>
<view class='box_flex'>下架</view>
</view>
</view>

<view class='box_list_group'>
<view class='list_top'>
<view class='list_left'><image src='img/header_bg.png'></image></view>
<view class='list_right'>
<view class='shop_text_1'>坚果坚果坚果坚果坚果坚果坚坚果坚果坚果坚果坚果坚果坚果坚果坚果</view>
<view class='shop_text_2'>￥1020/份</view>
<view class='shop_text_3'>库存：   不限库存</view>
<view class='shop_text_4'>销量： 0</view>
</view>
<view class='clear_both'></view>
</view>
<view class='list_bottom'>
<view class='box_flex'>删除</view>
<view class='box_flex'>清除</view>
<view class='box_flex'>下架</view>
</view>
</view>


</view>
</view>
 
<!--上架中-->
<view hidden="{{currentTab1!==1}}">
  tab_02
</view>
 
<!--已下架-->
<view hidden="{{currentTab1!==2}}">
  tab_03
</view>

<!--不限-->
<view hidden="{{currentTab1!==3}}">
  tab_04
</view>





</view>
 
<!--商品分组-->
<view hidden="{{currentTab!==1}}">

<view class="top-news">
      <view class="nav-scroll">
        <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
               <text wx:for="{{section2}}" data-idx="{{index}}" class="item_2 {{currentTab2==index ? 'active_1' : ''}}" wx:key="id" bindtap="navbarTap_2" id="{{item.id}}">{{item.name}}</text>
        </scroll-view>
      </view>
</view>


<!--所有商品2-->
<view hidden="{{currentTab2!==0}}">
<view class='box_list'>

<view class='box_list_group'>
<view class='list_top'>
<view class='list_right'>
<view class='shop_text_1'>坚果坚果坚果坚果坚果坚果坚坚果坚果坚果坚果坚果坚果坚果坚果坚果</view>
<view class='shop_text_2'>上架中</view>
<view class='shop_text_3'></view>
<view class='shop_text_4'>共：1件</view>
</view>
<view class='clear_both'></view>
</view>
<view class='list_bottom'>
<view class='box_flex'>删除</view>
<view class='box_flex'>清除</view>
<view class='box_flex'>下架</view>
<view class='box_flex'>商品</view>
</view>
</view>

<view class='box_list_group'>
<view class='list_top'>
<view class='list_right'>
<view class='shop_text_1'>坚果坚果坚果坚果坚果坚果坚坚果坚果坚果坚果坚果坚果坚果坚果坚果</view>
<view class='shop_text_2'>上架中</view>
<view class='shop_text_3'></view>
<view class='shop_text_4'>共：1件</view>
</view>
<view class='clear_both'></view>
</view>
<view class='list_bottom'>
<view class='box_flex'>删除</view>
<view class='box_flex'>清除</view>
<view class='box_flex'>下架</view>
<view class='box_flex'>商品</view>
</view>
</view>


</view>
</view>
 
<!--上架中-->
<view hidden="{{currentTab2!==1}}">
  tab_02
</view>
 
<!--已下架_2-->
<view hidden="{{currentTa2!==2}}">
  tab_03
</view>


</view>
 




.nav_header{
margin-top: 30rpx;
}
 .navbar{
 font-size: 32rpx;
 padding:30rpx;
  flex: none;
  display: flex;
  /* background: #fe2d4a; */
  background-color: #FFD161;
}
.navbar .item{

  border:2rpx solid #fff;
  float: left;
  flex: 3;

  position: relative;
  /* flex: auto; */
  text-align: center;
  line-height: 60rpx;
  color:#fff;
}
.navbar .item.active{
  /* color: #fe2d4a; */
  color: #FFD161;
  background-color: #fff;
  
}
/* .navbar .item .active:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: #FFCC00;
} */
.navbar .add{
flex: 1;
}
.navbar .add_1{
flex: 1;
text-align: right;
font-size: 38rpx;
color:#fff;
}



/*子导航*/
.top-news{
  background-color: #fff;
  width:100%;
  height: 89rpx;

z-index: 999;
overflow: hidden;

 }
.scroll-view_H{
  white-space:nowrap;
  width: 100%;
padding-left: 16rpx;
box-sizing: border-box;
}

.item_1{
display:inline-block;
font-size:32rpx;
color: #404040;
/* border-bottom: 2px solid #404040; */
padding:20rpx 50rpx;
}
.active_1{
  color: #FFD161;
  border-bottom: 2px solid #FFD161;
  }
  /* 产品分组下的导航 */
.item_2{
display:inline-block;
font-size:32rpx;
color: #404040;
padding:20rpx 70rpx;
}





data: {
    navbar: ['商品列表', '商品分组', ],

    section: [
      { name: '所有商品', id: '1001' }, { name: '上架中', id: '1032' },
      { name: '已下架', id: '1003' }, { name: '不限', id: '1004' },
   
    ],
    // 商品分组
    section2: [
      { name: '所有商品', id: '1001' }, { name: '上架中', id: '1032' },
      { name: '已下架', id: '1003' },
    ],
  // 商品列表// 商品分组
    currentTab: 0,
     // 商品列表
    currentTab1:0,
      // 商品分组
    currentTab2: 0,
   
  },
  // 商品列表// 商品分组
  navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  },
  
      // 商品列表
  navbarTap_1: function (e) {
    this.setData({
      currentTab1: e.currentTarget.dataset.idx
    });
  },
    // 商品分组
    navbarTap_2: function (e) {
    this.setData({
      currentTab2: e.currentTarget.dataset.idx
    });
  }
7.自定义底部弹出层
<view class='yourPurse' bindtap='showModal'><button>123</button></view>

<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
这是内容
</view>


.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}

.commodity_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
}


showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  }
8.判断手机是否是iPhoneX以上

在app.js中使用

 App({
  onLaunch: function (options) {
 //判断手机是iPhoneX以上
      let that = this;
      wx.getSystemInfo({
        success: res => {
          if(res.safeArea.top > 20){
            that.globalData.needAdapt = true
          }
        }
      })
      }
      })

在页面中使用

var app = getApp();



Page({



 */***

  ** 页面的初始数据*

  **/*

 data: {

  *// isIpx: app.globalData.isIpx,*

  isIphoneX: app.globalData.needAdapt,

 },

 })
Ajax石斑
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实现各种特效实例
Dreawer微信小程序联盟
12-01 3261
写在前面 最近在负责一个微信小程序的前端以及前后端接口的对接的项目，整体上所有页面的布局我都已经搭建完成，里面有一些常用的特效，总结一下，希望对大家和我都能有所帮助 实例1：滚动tab选项卡 先看一下效果图吧，能够点击菜单或滑动页面切换，tab菜单部分可以实现左右滚动 好了，看一下我的源码吧！<喜欢的话拿走不谢哟> 1、wxml <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
微信小程序-常用的视图容器类组件
2301_79188932的博客
05-22 1172
小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。可移动的视图容器，在页面中可以拖拽滑动.movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。
微信小程序显示样式知识点总结
宋小羽
01-02 1022
1. view标签之flex布局 flex即HTML中的inline,使块状元素变为行内元素 display: flex; 1.1 flex布局的方向选择 设置flex布局后,可以选择横向布局或纵向布局,共有以下四种方式 flex-direction: row： 从左到右的水平方向为主轴 row-reverse： 从右到左的水平方向为主轴 column： 从上到下的垂直方向为主轴 column-reverse： 从下到上的垂直方向为主轴 1.2
微信小程序开发中的动画效果与过渡效果
qq_67153941的博客
06-03 396
本文介绍了微信小程序开发中的动画效果与过渡效果的内容，并提供了相应的代码案例。通过使用动画效果和过渡效果，可以使小程序页面更加生动和有趣，提升用户体验。在微信小程序开发中，可以通过使用动画效果给页面元素添加各种动态的变化，例如移动、旋转、透明度变化等。下面将介绍一些常用的动画效果，并提供相应的代码案例。下面将介绍一些常用的过渡效果，并提供相应的代码案例。以上是一些常用的过渡效果示例，可以根据具体需求调整过渡效果的参数和属性。以上是一些常用的动画效果示例，可以根据具体需求调整动画的参数和属性。
微信小程序-首页制作 - (图解+代码流程)
Envyᥫᩣ的博客
07-06 2066
微信小程序作为轻量级的应用平台，为用户和开发者提供了便捷的服务访问和丰富的功能体验。制作一个吸引人的小程序首页是至关重要的，它不仅是用户的第一印象，也直接影响到用户的留存与活跃度。在设计小程序首页时，融入文章摘要的元素，可以有效地提升内容的可读性和吸引力，让用户在短时间内获取关键信息，激发阅读兴趣。
微信小程序轮播图常用炫酷样式----swiper
weixin_52658156的博客
07-16 4188
微信小程序开发中，轮播图承担广告展示、热销产品推荐等重要作用。下面介绍两种小程序轮播图常用样式。 演示 有层次感的3D 无层次感的平面 源代码 有层次感3D wxml <view class="swiperContainer"> <swiper class="imageContainer" bindchange="swiperChange" previous-margin="55rpx" next-margin="50rpx" circular autoplay
【微信小程序】常用的几种轮播图
Qianmoer的博客
01-27 1275
wxml: wxss: js: 轮播效果二 wxml: wxss: js: 轮播效果三 wxml: wxss: 轮播效果四 wxml: wxss:
微信小程序--立体清新文字
海到无边天作岸 山登绝顶我为峰
03-01 2794
效果展示 Demo代码 index.wxml <view class="word" style="--x: 6; --y: -6;"> <view style="--index: 0; --alpha-l: 0.125; --alpha-u: 0.25;">P</view><view style="--index: 1; --alpha-l: 0.125; --alpha-u: 0.25;">u</view><view style="
微信小程序实现拆红包动画
苏苏就是小苏苏的博客
03-24 2266
1.实现效果 2.实现原理 wx.createAnimation(Object object)：创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。 点击红包，弹出红包弹框，用到过渡动画 this.animation.translate('-50%', '-50%').step(); 关闭弹框 this.animation.translate('-50%', '100%').step();
微信小程序——swiper轮播图自定义指示样式
qq_43201350的博客
08-17 375
微信小程序——swiper轮播图自定义指示样式
微信小程序加载布局特效
05-10
在微信小程序中，加载布局特效是提升用户体验的重要环节，它能够吸引用户的注意力，使得小程序的启动过程更具吸引力。本篇文章将详细探讨四款微信小程序加载布局特效及其实现方式。 一、渐进式加载 渐进式加载是...
微信小程序-微信小程序的相关特效插件
08-08
wxapp-微信小程序组件 weui-wxss中的样式还算齐全，不过根据自己平时的业务需要又新增了一些组件，目前想到的暂时为以下几个 [x] 文字跑马灯 [x] 弹出层（常用于选择商品属性） [x] 订单好中差评价交互 ...
微信小程序实现吸顶特效
10-15
以上就是微信小程序实现吸顶特效的详细过程，通过合理地结合结构、样式和逻辑，我们可以创建出流畅的用户体验，使得关键信息始终保持可见。这种技术在电商、新闻阅读等场景中尤其有用，提高了用户的导航效率。
微信小程序 特效菜单抽屉效果实例代码
08-31
在本文中，我们将深入探讨如何在微信小程序中实现一个具有特效的抽屉式菜单。抽屉菜单是一种常见的UI设计模式，它允许用户通过从屏幕边缘滑动来显示或隐藏附加功能和选项。这种效果在许多应用程序中都能看到，因为它...
微信小程序 - 自定义计数器
觉醒法师的专栏
08-02 1168
微信小程序通过自定义组件，实现计数器值的增加、减少、清零、最大最小值限定、禁用等操作。通过按钮事件触发方式，更新计数器的值，并修改相关联的其它变量。通过提升用户体验，对计数器进行优化设计，使用户操作更加便捷和直观。
微信小程序教程011-1：京西购物商城实战
最新发布
WwLK123的博客
08-05 32
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
微信小程序 - 自定义计数器 - 优化(键盘输入校验)
觉醒法师的专栏
08-05 538
微信小程序通过自定义组件，实现计数器值的增加、减少、清零、最大最小值限定、禁用等操作。通过按钮事件触发方式，更新计数器的值，并修改相关联的其它变量。通过提升用户体验，对计数器进行优化设计，使用户操作更加便捷和直观。该篇将讲述一下中间input输入框值变化后的校验操作。
Java灵活用工兼职全职报价单微信小程序+APP+微信公众号源码
2401_84413757的博客
08-05 255
在这个快节奏的时代，灵活用工已成为趋势。而一款好的报价单工具，就是你高效管理、赢得市场的得力助手！💪 无论是APP还是微信小程序，都能完美满足你的需求，让报价工作变得轻松又高效。
微信小程序h5图片按钮特效
02-07
微信小程序是一种轻量级的应用程序，用户可以在微信中进行访问和使用。而微信小程序的H5图片按钮特效指的是在小程序中，通过使用H5技术来实现图片按钮的特效效果。 在微信小程序中，可以通过使用HTML、CSS和JavaScript来创建和美化图片按钮。首先，可以使用HTML来创建一个按钮元素，通过设置按钮的class属性，可以为按钮添加样式。 然后，使用CSS来为按钮元素添加特效效果，如过渡、动画、阴影等。可以设置按钮在不同状态下的样式，鼠标悬停、按下等效果，使按钮在用户交互中展现出动态和生动的效果。 最后，可以使用JavaScript来为按钮添加点击事件，当用户点击按钮时触发相应的操作，如跳转页面、提交表单等。 通过上述的步骤，可以实现微信小程序中H5图片按钮的特效，使得按钮在交互中具有更好的用户体验和视觉效果。可以根据具体需求和设计要求，选择不同的特效效果，如渐变色、旋转、缩放等，来增加按钮的吸引力和可点击性。 总之，微信小程序H5图片按钮特效是通过H5技术来实现在小程序中为图片按钮添加动态、生动和吸引人的特效效果，提升用户体验和视觉效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值