小程序特效点击展示图

工作经常写的特效 提炼出来。方便以后搬砖，减少重复思考时间

---

---

此处我使用2个大的div 一个是黑色背景 一个是白色展示

css:

.fixedTop{width: 100%;  height: 76rpx;  background-color: #fff;  position: fixed;  top: 0;  left: 0;  z-index: 999;  overflow: hidden;  transition: all .5s;  box-shadow:0 0 5rpx rgba(0,0,0,.2);}

.mask {   width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.5);  position: absolute;  top: 0;  left: 0;  z-index: 1;}

 展示部分分为2块 ，一个是进入页面不展示，另一个是进入页面后点击展示

---

.screenBox { background-color: yellow; height: 90rpx; }

.screenBox view {  border: 1rpx solid red;  text-align: center;  flex: 2rpx;  overflow: hidden;  additive-symbols: 90rpx;  line-height: 90rpx;  height: 90rpx;}

.screenView {  width: 100%;  height: 623rpx;  padding: 0 24rpx;  overflow: scroll;}

---

js:

// 选择风格

  bindScreen: function (e) {

    let that = this;

    let screenInd = e.currentTarget.dataset.index;

    that.setData({

      screenInd: screenInd,

      screenItem: 0,

    })

    if (screenInd == undefined) {

      screenInd = -1;

    }

    if (screenInd == -1) {

      that.setData({

        showScreen: !that.data.showScreen,

      })

      return false

    } else {

      that.setData({

        showScreen: true,

      })

    }

  },

---

全部代码：

<view>

  <view class='fixedTop {{showScreen?"allScreen":""}}'>

    <view class="flex-center screenBox ">

      <view bindtap='bindScreen' data-index='1'> 1</view>

      <view bindtap='bindScreen' data-index='2'> 2 </view>

      <view bindtap='bindScreen' data-index='3'> 3</view>

      <view bindtap='bindScreen' data-index='4'> 4 </view>

    </view>

    <view class="screenView">

      <!-- 1 -->

      <block>

        <view class='screen flex-flex-center' hidden='{{screenInd!=1}}'> 1</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=1}}'> 1</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=1}}'>1</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=1}}'>1</view>

      </block>

      <!-- 2 -->

      <block>

        <view class='screen flex-flex-center' hidden='{{screenInd!=2}}'> 2</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=2}}'> 2</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=2}}'>2</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=2}}'>2</view>

      </block>

      <!-- 3 -->

      <block>

        <view class='screen flex-flex-center' hidden='{{screenInd!=3}}'> 3</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=3}}'> 3</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=3}}'>3</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=3}}'>3</view>

      </block>

      <!-- 4 -->

      <block>

        <view class='screen flex-flex-center' hidden='{{screenInd!=4}}'> 4</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=4}}'> 4</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=4}}'>4</view>

        <view class='screen flex-flex-center' hidden='{{screenInd!=4}}'>4</view>

      </block>

    </view>

  </view>

  <view class="mask" hidden='{{!showScreen}}' bindtap='bindScreen'></view>

</view>

---

css

page{

  box-sizing:border-box;

}

.flex-center {

  display: flex;

  justify-content: space-between;

}

.mask {

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

}

.fixedTop{

width: 100%;

  height: 76rpx;

  background-color: #fff;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 999;

  overflow: hidden;

  transition: all .5s;

  box-shadow:0 0 5rpx rgba(0,0,0,.2);

}

.allScreen {

height: 800rpx;

  transition: all .5s;

}

.screenBox {

  background-color: yellow;

  height: 90rpx;

}

.screenBox view {

  border: 1rpx solid red;

  text-align: center;

  flex: 2rpx;

  overflow: hidden;

  additive-symbols: 90rpx;

  line-height: 90rpx;

  height: 90rpx;

}

.screenView {

  width: 100%;

  height: 623rpx;

  padding: 0 24rpx;

  overflow: scroll;

}

---

js 

Page({

  data: {

    html: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div>',

    nodes: [{

      name: 'div',

      attrs: {

        class: 'div_class',

        style: 'line-height: 60px; color: red;'

      },

      children: [{

        type: 'text',

        text: 'Hello&nbsp;World!'

      }]

    }]

  },

  tap() {

    console.log('tap')

  },

  // 选择风格

  bindScreen: function (e) {

    let that = this;

    let screenInd = e.currentTarget.dataset.index;

    that.setData({

      screenInd: screenInd,

      screenItem: 0,

    })

    if (screenInd == undefined) {

      screenInd = -1;

    }

    if (screenInd == -1) {

      that.setData({

        showScreen: !that.data.showScreen,

      })

      return false

    } else {

      that.setData({

        showScreen: true,

      })

    }

  },

})