weex slider 미끄럼 밑부분 내 비게 이 션 기능 구현
효과 도 를 먼저 보다
여 기 는 주로 weex 의 slider 를 사용 하여 미 끄 러 질 수 있 는 아래쪽 네 비게 이 션 프레임 워 크 를 실현 하 였 습 니 다.
여기 서 가장 중요 한 몇 가지 방법 은 weex 의 공식 문 서 를 보 는 것 만으로 도 매우 고 통 스 러 울 수 있 습 니 다.일부 기능 은 코드 에 이미 쓰 여 있 지만 그 는 쓰 지 않 았 습 니 다.공식 문서 가 빨리 보완 되 기 를 바 랍 니 다.
이러한 기능 을 실현 하려 면 먼저 slider 의 용법 입 니 다.이 공식 문 서 는 이 걸 로 여러분 에 게 윤 방 도 를 만들어 드 리 는 것 입 니 다.
우선 자동 재생 ok 을 설정 할 수 없습니다.
둘째,어느 페이지 로 굴 러 가 는 색인 을 포착 할 수 있어 야 합 니 다.이 값 은 아래 의 현재 tab(slider 를 감청 하 는 change 방법)을 설정 해 야 합 니 다.
셋째,우 리 는 외부 js 를 통 해 slider 의 현재 페이지 를 설정 해 야 합 니 다.예 를 들 어 두 번 째 tab 를 클릭 하면 표 시 된 index 를 1(index 는 0 에서 시작 합 니 다)공식 문서 로 설정 해 야 합 니 다.현재 이 설명 을 하지 않 았 습 니 다.
그러면 다음 에 우 리 는 소스 코드 를 통 해 발굴 합 니 다.우 리 는 slider 가 사실은 하나의 속성 을 가 질 수 있다 는 것 을 알 고 있 습 니 다:index
이것 이 바로 현재 색인 입 니 다.그러면 우 리 는 이 색인 을 설정 해 야 합 니 다.이것 이 받 아야 할 index 의 값 을 바 꾸 면 됩 니 다.
그러면 여기에 코드 를 붙 입 니 다.(글 의 모든 그림 은 assets 폴 더 에 가서 그림 을 얻 는 것 입 니 다.로 컬 그림 이 아니 므 로 assets 디 렉 터 리 에 그림 을 넣 어야 합 니 다)
<template>
<div :style="{height:`${totalheight}px`}">
<slider style="flex:1;" @change="onchange" :index="page">
<div class="frame" v-for="img in imageList">
<image class="image" resize="cover" :src="img.src"></image>
<text class="contenttext"> {{page+1}} </text>
</div>
</slider>
<text style="background-color:gray;height:2px;bottom:100px;"/>
<div class="nav">
<div class="link" @click="changepage(0)">
<image id="image1" v-bind:src="src1" class="logo"></image>
<text class="title" :style="{color:page === 0?'#00BBE4':'gray'}"> {{pathchanged}}</text>
</div>
<div class="link" @click="changepage(1)">
<image v-bind:src="src2" class="logo"></image>
<text class="title" :style="{color:page === 1?'#00BBE4':'gray'}"> </text>
</div>
<div class="link" @click="changepage(2)">
<image v-bind:src="src3" class="logo"></image>
<text class="title" :style="{color:page === 2?'#00BBE4':'gray'}"> </text>
</div>
</div>
</div>
</template>
<style scoped>
.image {
width: 750px;
height: 700px;
}
.slider {
width: 750px;
height: 700px;
border-width: 2px;
border-style: solid;
border-color: #41B883;
}
.frame {
width: 750px;
height: 700px;
position: relative;
}
.logo {
position: relative;
width: 45px;
height: 45px;
}
.nav {
position: absolute;
width: 750px;
bottom: 0px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.link {
width: 162.5px;
flex-shrink: 1;
text-align: center;
margin:0 auto;
padding: 3px;
align-items: center;
}
.title {
font-size: 25px;
line-height: 35px;
text-align: center;
top: 5px;
}
.contenttext {
font-size: 32px;
line-height: 35px;
text-align: center;
top: 25px;
color: 38px;
color: red;
}
</style>
<script>
export default {
data () {
return {
page:0,
imageList: [
{ src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
],
src1: "../../../assets/home_btn_home_s.png",
src2: "../../../assets/home_btn_rent.png",
src3: "../../../assets/cut.png"
}
},
methods:{
onchange(evtValue){
this.page=evtValue.index
},
changepage(page){
this.page=page
}
},
computed: {
totalheight(){
const height = 750/weex.config.env.deviceWidth*weex.config.env.deviceHeight
return height-180
},
pathchanged(){
var self = this
if(self.page === 0){
self.src1 = "../../../assets/home_btn_home_s.png"
self.src2 = "../../../assets/home_btn_rent.png"
self.src3 = "../../../assets/cut.png"
}else if(self.page === 1){
self.src1 = "../../../assets/home_btn_home.png"
self.src2 = "../../../assets/home_btn_rent_s.png"
self.src3 = "../../../assets/cut.png"
}else if(this.page === 2){
self.src1 = "../../../assets/home_btn_home.png"
self.src2 = "../../../assets/home_btn_rent.png"
self.src3 = "../../../assets/cut_on.png"
}
return ''
}
}
}
</script>
이 걸 물 어 보 는 친구 들 을 자주 만 나 기 때문에 아예 하 나 를 써 서 참고 해 드 리 겠 습 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Drupal 8에서 간단한 슬라이더 만들기슬릭 뷰 모듈을 설치하고 활성화합니다. Composer는 자체적으로 추가 모듈인 slick, slick ui를 찾아 설치합니다. 상태 보고서 페이지로 이동합니다. Slick은 라이브러리 설치가 필요합니다. 터미널에서...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.