小程序特效点击展示图
工作经常写的特效 提炼出来。方便以后搬砖，减少重复思考时间
此处我使用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 World!</div>',
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello 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,
})
}
},
})
