애플 릿 페이지 효과 구현
<view class="pages_box">
<view bindtap="pagesFn" class="{{pagesNum==0?'active':''}}" data-type="0"> </view>
<block wx:for="shujuDataArr11111" wx:key="index" wx:if="{{index+1<4}}">
<view wx:if="{{tyindex+index <=maxPages}}" bindtap="pagesFn" class="{{pagesNum==tyindex+index?'active':''}}" data-type="{{tyindex+index}}">{{tyindex+index}}</view>
</block>
<view bindtap="pagesFn" class="{{pagesNum==-1?'active':''}}" data-type="-1"> </view>
</view>
js:
// pages/ceshiPages/index.js
Page({
/**
*
*/
data: {
pagesNum:1,
maxPages:15,//
tyindex:1
},
/**
* --
*/
onLoad: function (options) {
},
pagesFn:function(e){
let type = e.currentTarget.dataset.type;
let _that = this;
if(typeof type == "string"){//
if(type == "previous_page"){//
if(_that.data.pagesNum-1 >0){
_that.setData({
pagesNum:_that.data.pagesNum-1,
tyindex:_that.data.pagesNum-1,
})
}
console.log(_that.data.pagesNum)
}else{//
if(_that.data.pagesNum+1 <= _that.data.maxPages){
if((_that.data.pagesNum+1)%3 == 0){
_that.setData({
tyindex:_that.data.pagesNum+1,
})
}
_that.setData({
pagesNum:_that.data.pagesNum+1,
})
console.log(_that.data.pagesNum)
}
}
}else{
console.log(_that.data.pagesNum)
if(type>_that.data.pagesNum){
if(type <= _that.data.maxPages){
_that.setData({
tyindex:type,
pagesNum:type,
})
}
}
if(type<_that.data.pagesNum){
if(type >=1){
_that.setData({
tyindex:type,
pagesNum:type,
})
}
}
console.log(_that.data.pagesNum)
}
},
/**
* --
*/
onReady: function () {
},
/**
* --
*/
onShow: function () {
},
/**
* --
*/
onHide: function () {
},
/**
* --
*/
onUnload: function () {
},
/**
* --
*/
onPullDownRefresh: function () {
},
/**
*
*/
onReachBottom: function () {
},
/**
*
*/
onShareAppMessage: function () {
}
})
CSS:
/* pages/ceshiPages/index.wxss */
.pages_box{
margin-top: 20rpx;
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: space-around;
align-content: flex-start;
flex-wrap: nowrap;
}
.pages_box>view{
line-height: 60rpx;
font-size: 30rpx;
border: 1px solid #A0A0A0;
background-color: #F7F7F7;
display: inline-block;
padding: 0 25rpx;
margin-left: 12rpx;
color: #64646C;
border-radius: 10rpx;
}
.pages_box>view.active{
background-color: #FCD821;
border-color: #F39800;
}
.pages_box>view:last-child,.pages_box>view:first-child{
border-radius: 60rpx;
padding: 0 30rpx;
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.