微信小程序 自定义d窗

 <button bindtap="powerDrawer" type="primary" size="mini" style="width: 55%;" data-statu="open">中奖记录</button>  

<!-- 中间名单d窗 -->

<view class="drawer_div">

  <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>

    <view animation="{{animationPrize}}" class="drawer_box" wx:if="{{showModalStatus}}">

      <view class="drawer_title">

        中奖记录

        <image src="/img/x@2xpng" bindtap="powerDrawer" data-statu="close"></image>

      </view>

      <view class="drawer_content">

        <view class="top grid">

          <text>

            名称：啦啦啦啦啦啦啦啦

          </text>

          <text>

            时间：2020-02-20

          </text>

        </view>

        <view class="top grid">

          <text>

            名称：啦啦啦啦啦啦啦啦

          </text>

          <text>

            时间：2020-02-20

          </text>

        </view>

    </view>

  </view>

</view>

drawer_screen {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 1000;

  background: #000;

  opacity: 05;

  overflow: hidden;

}

/content/

drawer_box {

  width: 650rpx;

  overflow: hidden;

  position: fixed;

  top: 50%;

  left: 0;

  z-index: 1001;

  background: #FAFAFA;

  margin: -150px 50rpx 0 50rpx;

  border-radius: 3px;

}

drawer_title{

  padding:30rpx 20rpx;

  font-size: 36rpx;

  text-align: center;

  position: relative;

}

drawer_title image{

  display: inline-block;

  width: 30rpx;

  height: 30rpx;

  position: absolute;

  right: 9px;

  top: 10px;

}

drawer_content {

  height: 210px;

  overflow-y: scroll; /超出父盒子高度可滚动/

  padding: 0 20rpx;

}

top{

  display: flex;

  justify-content: space-between;

  border-bottom: 1px dashed #ccc;

}

top text{

  display: inline-block;

  height: 60rpx;

  line-height: 20rpx;

}

data: {

animationPrize: {},

}

powerDrawer: function (e) {

    // consolelog(e);

    let currentStatu = ecurrentTargetdatasetstatu;

    thisutil(currentStatu);

  },

  util: function (currentStatu) {

    / 动画部分 /

    // 第1步：创建动画实例

    var animation = wxcreateAnimation({

      duration: 200,  //动画时长

      timingFunction: "linear", //线性

      delay: 0  //0则不延迟

    });

    // 第2步：这个动画实例赋给当前的动画实例

    thisanimation = animation;

    // 第3步：执行第一组动画

    animationopacity(0)rotateX(-100)step();

    // 第4步：导出动画对象赋给数据对象储存

    thissetData({

      animationPrize: animationexport()

    })

    // 第5步：设置定时器到指定时候后，执行第二组动画

    setTimeout(function () {

      // 执行第二组动画

      animationopacity(1)rotateX(0)step();

      // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象

      thissetData({

        animationPrize: animation

      })

      //关闭

      if (currentStatu == "close") {

        thissetData({

          showModalStatus: false

        });

      }

    }bind(this), 200)

    // 显示

    if (currentStatu == "open") {

      thissetData({

        showModalStatus: true

      });

    }

  },

讲解下循环输出元素

这里写描述

这里写描述

后台存储的数据给事

{

var local_database = [

{

date: "Sep 18 2016",

post_title:"冬日校花",

post_image: "/images/1jpg",

text: "美呀，美呀",

view_num: 112,

collect_num: 96,

turn_num: 515,

author_img: "/images/6jpg",

author:"高晴",

dateTime:"24小时",

detail:"我爱你，爱的如此深沉",

postId:0,

music:{

url: 'down/46993mp3',

title: "雪の华-南条爱乃",

coverImg: "/music/photo_new/T002R150x150M000001TEc6V0kjpVCjpgmax_age=2592000"

},

},

{

date: "Sep 18 2016",

post_title: "冬日校花",

post_image: "/images/2jpg",

text: "美呀，美呀",

view_num: 112,

collect_num: 96,

turn_num: 515,

author_img: "/images/6jpg",

author: "高晴",

dateTime: "24小时",

detail: "我爱你，爱的如此深沉",

postId: 1,

music: {

url: '/yq/5092537mp3',

title: "爱你-陈芳语",

coverImg: "/music/photo_new/T002R150x150M000001TEc6V0kjpVCjpgmax_age=2592000"

},

},

{

date: "Sep 18 2016",

post_title: "冬日校花",

post_image: "/images/3jpg",

text: "美呀，美呀",

view_num: 112,

collect_num: 96,

turn_num: 515,

author_img: "/images/6jpg",

author: "高晴",

dateTime: "24小时",

detail: "我爱你，爱的如此深沉",

postId: 2,

music: {

url: '/yq/204586755mp3',

title: "云烟成雨-房东的猫",

coverImg: "music/photo_new/T002R150x150M000001TEc6V0kjpVCjpgmax_age=2592000"

},

},

{

date: "Sep 18 2016",

post_title: "冬日校花",

post_image: "/images/4jpg",

text: "美呀，美呀",

view_num: 112,

collect_num: 96,

turn_num: 515,

author_img: "/images/6jpg",

author: "高晴",

dateTime: "24小时",

detail: "我爱你，爱的如此深沉",

postId: 3,

music: {

url: '/yq/213919334mp3',

title: "Your Song-Lady Gaga",

coverImg: ">

<!--pages/search/searchwxml-->

<van-search

  value="{{ value }}"

  placeholder="请输入搜索关键词"

  show-action

  input-align="center"

  bind:search="onSearch"

  bind:cancel="onCancel"

  bind:change="onChange"

    background="#4fc08d"

/>

<ListItem itemList="{{itemList}}" />

<view wx:if="{{kong}}" style="padding: 20px;text-align: center;">无更多数据</view>

<van-toast id="van-toast" />

{

  "usingComponents": {

    "van-search": "@vant/weapp/search/index",

    "ListItem":"/components/ListItem/ListItem",

    "van-toast": "@vant/weapp/toast/index"

  },

  "navigationBarTitleText": "搜索",

  "enablePullDownRefresh": true,

  "onReachBottomDistance": 0

}

const { goods>

以上就是关于微信小程序 自定义d窗全部的内容，包括:微信小程序 自定义d窗、微信小程序这种json数据要怎么在前端循环输出{"0":{"day":"7","time_data":"数据"}}、小程序简单的搜索栏等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！