小程序swiper 和scroll-view结合做切换的滑动效果（taro）

import Taro, { Component } from '@tarojs/taro'

import {View, Text,ScrollView, Image,Swiper,SwiperItem} from '@tarojs/components'

import { fromJS, is ,List} from 'immutable'

import {throttle} from "../../common/Utils"

import './index.styl'

 

import CFG from '../../common/Config'

import FeedService from '../../common/service/FeedService'

import eyePng from '../../images/eye.png'

import Dialog from "../../components/dialog"

 

var timer=0;

export default class Index extends Component {

constructor(props){

super(props);

this.state = {

catCur: 'home',

curIndex: 0,

catList: [],

itemList: [],

lastIndex: 0,

contentViewHeight:200,

loadAllTips : {

show : false,

msg : '正在为您推荐。。。'

},

loadingTips : {

show : true,

msg : '加载中。。。'

},

loadMoreTips : {

show : false,

msg : '正在努力加载。。。'

},

duration: 500,

swiperList: [],

swiperCurrent: 0,

doing : false,

collectionData:[{'articles':[]}],

swiperError:0,

action:{},

distance:0,

scrollLeft:'', //距离左边的距离

clientWidth:'', //屏幕的宽

};

}

 

componentWillMount () {

}

 

componentWillReceiveProps(nextProps){

if(!is(fromJS(this.props), fromJS(nextProps))){

}

}

shouldComponentUpdate(nextProps, nextState) {

return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))

}

 

componentDidMount () {

if (process.env.TARO_ENV === 'swan') {

FeedService.getIndexSeoInfo().then((data) => {

swan.setDocumentTitle && swan.setDocumentTitle({

title: data.title

});

 

swan.setMetaKeywords && swan.setMetaKeywords({

content: data.keywords

});

 

swan.setMetaDescription && swan.setMetaDescription({

content: data.desc

});

})

}

Taro.getSystemInfo({

success: (res) => {

this.setState(

{

contentViewHeight: res.windowHeight-84,

clientWidth:res.windowWidth

})

 

},

fail: (err) => {

}

});

FeedService.findCarouselsList().then((data) => {

if(data&&data.length){

this.setState({

swiperList:data

})

}

});

FeedService.findCatList().then((data)=>{

data.map((cat,index)=>{

cat.catCode===this.state.catCur?cat.active=true:cat.active=false;

cat.curIndex = index;

return cat

});

//this.loadCollection(data)

this.setState({catList: data})

}).catch((error)=>{

console.error('error:',error)

});

this.switchTab(this.state.catCur,this.state.curIndex)

}

loadArticleList(catCode,more,lastIndex,curIndex){

FeedService.findArticleList(catCode,more,lastIndex).then((data)=>{

let newArticleList = more ? this.state.itemList.concat(data.articles) : data.articles;

for(var i=0;i<this.state.catList.length;i++){

this.state.collectionData.push({'articles':[]})

}

 

this.state.collectionData[curIndex].articles = newArticleList;

this.setState({

itemList: newArticleList,

collectionData:this.state.collectionData,

lastIndex:data.shown_offset ? data.shown_offset : 0,

curIndex:curIndex

});

//加载提示信息

if(!more&&data.articles.length>0){

this.setState({

loadMoreTips : {

show : true,

msg : `系统已为您推荐 ${data.articles.length} 条`

}

});

setTimeout(()=>{

this.setState({

loadMoreTips : {

show : false

}

})

},0.3e3)

}else{

this.setState({

loadMoreTips : {

show : false

}

})

}

 

if(more&&newArticleList.length>0&&data.articles.length==0){

}

 

if(newArticleList.length==0){

console.log('空空如也！')

}

this.setState({loadingTips:{show:false}})

}).catch((error)=>{

console.error('服务端异常,请稍后',error);

this.setState({loadingTips:{show:false}})

})

}

goToDetail(userName, articleId) {

if(timer){

return

}

Taro.navigateTo({ url: `/pages/blog/article-detail?userName=${userName}&articleId=${articleId}`});

timer=setTimeout(()=>{

timer=0

},500)

}

 

goToSearch() {

Taro.navigateTo({ url: `/pages/search/index`})

}

 

switchTab(catCode,curIndex){

// let dirction

// let distance

// let action = {}

// let step = 50

// if(curIndex>this.state.curIndex){

// // 向左滑动 负数

// dirction = -1

 

// } else {

// // 向右滑动 正数

// dirction = 1

// }

// console.log('this.state.distance=======',this.state.distance)

// console.log('dirction*step',dirction*step)

// distance = this.state.distance + dirction*step

// action = Taro.createAnimation({

// duration: 400,

// timingFunction: 'ease-in'

// })

// if(curIndex === 0) {

// distance = 0

// }

// console.log('移动的distance====',distance)

//action.translateX(distance).step()

this.throttle(()=>{

this.setState({

catCur:catCode,

loadingTips:{show:true},

collectionData:[],

// distance:distance,

// action:action

});

this.eady()

this.loadArticleList(catCode,'',0,curIndex);

})

 

}

eady () {

var self = this;

//获取导航的初始位置

const query = Taro.createSelectorQuery()

query.selectAll('.swip_item').boundingClientRect();

query.exec(function (res) {

//遍历你当前的tab栏 之前的所有dom节点的宽 相加设置为滚动条滚去的scrollLeft 就搞定了

var num=0;

for (var i = 0; i < self.state.curIndex;i++){

num += res[0][i].width

}

self.setState({

scrollLeft: Math.ceil(num)

})

})

}

throttle(callback,delay=300){

if(timer){

return

}

callback();

timer=setTimeout(()=>{

timer=0

},delay)

 

}

 

loadMore(){

if(timer){

return

}

this.setState({loadMoreTips : {show : true}});

this.loadArticleList(this.state.catCur,true,this.state.lastIndex);

timer=setTimeout(()=>{

timer=0

},500)

 

}

 

loadAll(){

this.setState({

loadAllTips : {

show : true,

msg : '正在为您推荐。。。'

}

});

this.loadArticleList(this.state.catCur)

}

switchSwiper(){

}

goToContent(item){

// 轮播图去详情页的跳转

if(item.articleId&&item.userName){

if(timer){

return

}

Taro.navigateTo({ url: `/pages/blog/article-detail?userName=${item.userName}&articleId=${item.articleId}`});

timer=setTimeout(()=>{

timer=0

},500)

}

}

swiperChange(e){

this.setState({

swiperCurrent: e.detail.current

})

}

replacePage(e){

this.setState({

curIndex: e.detail.current,

catCur:this.state.catList[e.detail.current].catCode

});

this.switchTab(this.state.catList[e.detail.current].catCode,e.detail.current)

}

endAnimation(){

}

backDefault(){

// if(this.state.distance === 0)return

// let action = Taro.createAnimation({

// duration: 400,

// timingFunction: 'ease-in'

// })

// const distance = this.state.distance + 50

// action.translateX(distance).step()

// this.setState({

// action:action,

// distance:distance

// })

}

render () {

const {catList,swiperList,swiperCurrent,collectionData,catCur,itemList,contentViewHeight,loadMoreTips} = this.state;

 

//分类导航选项卡

const catNavTabs = catList.map((cat) => {

return <View className={this.state.catCur===cat.catCode ? 'swip_item active':'swip_item'} key={cat.catCode} animation={this.state.action} onTransitiοnend={this.endAnimation} >

<View className='item' onClick={this.switchTab.bind(this,cat.catCode,cat.curIndex)} data-current={cat.curIndex} >{cat.catName}</View>

</View>

});

const swiperItem = swiperList.map((item,index)=>{

return <SwiperItem key={item.id} onClick={this.goToContent.bind(this,item)}>

<Image src={item.pic_url} className='swiper_img'></Image>

<View className='desc'>{item.title}</View>

</SwiperItem>

});

const dots = swiperList.map((item,index)=>{

return <View key={index}>

<View className={`dot ${index == swiperCurrent ? ' active' : ''}`}></View>

</View>

});

const listItemContent = collectionData.length&&collectionData.map((item,index) => {

const lists = item.articles.length&&item.articles.map((data,index) => {

return <View className='item' onClick={this.goToDetail.bind(this,data.user_name,data.id)} key={data.id}>

<View className='title'>{data.title}</View>

<View className='desc'>{data.summary}</View>

<View className='bot_cont'>

<Image src={data.avatar} className='head'></Image>

<Text className='nick'>{data.nickname}</Text>

<Text className='time'>{data.created_at}</Text>

<Image src={eyePng} className='reply'></Image>

<View className='num'>{data.views}</View>

</View>

</View>

});

return (

<SwiperItem className='out_box' key={index}>

<ScrollView

className='scrollview'

scrollY

scrollWithAnimation

scrollTop='0'

lowerThreshold='20'

upperThreshold='20'

style={'height:'+contentViewHeight+'px'}

onScrollToLower={this.loadMore.bind(this)}

>

{catCur === 'home' &&<View className='swipercontent'>

<Swiper

className='swiper_box'

circular

autoplay

duration='500'

interval='2000'

onChange={this.swiperChange}

current={swiperCurrent}

>{swiperItem}</Swiper>

<View className='dots'>{dots}</View>

</View>}

{lists}

{loadMoreTips.show&&<Image src='https://csdnimg.cn/weapp/csdn_weapp/load.png' className='loading' />}

</ScrollView>

</SwiperItem>)

});

 

return (

<View className='index'>

<View className='index_nav'>

<View className='search_put' onClick={this.goToSearch.bind(this)}>

{<View className='put_cont'>

<View className='box_search'>

<Text className='clean'></Text>

</View>

<View className='search_cont' style='color:#CCCCCC'>

{'搜索内容'}

</View>

</View>}

</View>

<View className='scroll_tab' >

<ScrollView scrollX className='swiper' onTouchMove={this.backDefault} scrollLeft={this.state.scrollLeft} scrollWithAnimation='true'>

{catNavTabs}

</ScrollView>

</View>

</View>

<Swiper className='wrap' current={this.state.curIndex} duration='500' onChange={this.replacePage} style={'height:'+contentViewHeight+'px'} >

{listItemContent}

</Swiper>

{this.state.loadingTips.show&&<Dialog></Dialog>}

</View>

)

}

}

参考文章：https://blog.csdn.net/weixin_42860683/article/details/83817925