小程序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.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 }); const swiperItem = swiperList.map((item,index)=>{ return }); const dots = swiperList.map((item,index)=>{ return }); const listItemContent = collectionData.length&&collectionData.map((item,index) => { const lists = item.articles.length&&item.articles.map((data,index) => { return }); return ( className='scrollview' scrollY scrollWithAnimation scrollTop='0' lowerThreshold='20' upperThreshold='20' style={'height:'+contentViewHeight+'px'} onScrollToLower={this.loadMore.bind(this)} > {catCur === 'home' && className='swiper_box' circular autoplay duration='500' interval='2000' onChange={this.swiperChange} current={swiperCurrent} >{swiperItem} } {lists} {loadMoreTips.show&& ) }); return ( { {'搜索内容'} } {catNavTabs} {listItemContent} {this.state.loadingTips.show&&} ) } }
参考文章：https://blog.csdn.net/weixin_42860683/article/details/83817925