taro坑之父子通信在父组件数据更新后子组件时而可以接受到最新变化的值（导致子组件不更新渲染页面）时而接受不到暂时的处理方式是不使用组件嵌套直接在父组件中完成

最新推荐文章于 2024-10-11 10:43:36 发布

after you

最新推荐文章于 2024-10-11 10:43:36 发布

阅读量6.4k

点赞数

本文链接：https://blog.csdn.net/gwdgwd123/article/details/86680938

版权

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

import { observer, inject } from '@tarojs/mobx'

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

import DraggableArea from "../../components/DraggableArea"

import { View, Text,Input,Image, ScrollView ,MovableArea, MovableView} from '@tarojs/components'

import SearchService from '../../common/service/SearchService'

import './index.styl'

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

import loadPng from '../../images/load.png'

import chaPng from '../../images/cha_icon.png'

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

@inject('counterStore')

@observer

class Index extends Component {

constructor(props){

super(props);

this.state = {

Sort:[],

moreSortList:[],

x:0,

y:0,

hidden:true,

flag:false,

// flag:true

disabled: true,

elements:[],

beginIndex:0

}

componentWillMount () {

}

componentWillUnmount () {

// 返回首页进行刷新操作

this.props.counterStore.dispatch('curIndex',0)

}

componentDidMount () {

var query = Taro.createSelectorQuery();

var nodesRef = query.selectAll(".item");

nodesRef.fields({

dataset: true,

rect:true

},(result)=>{

this.setState({

elements: result

})

}).exec()

}

componentWillReceiveProps(nextProps){

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

}

shouldComponentUpdate(nextProps, nextState) {

// console.log('!is(fromJS(this.props), fromJS(nextProps))',!is(fromJS(this.props), fromJS(nextProps)))

// console.log('!is(fromJS(this.state),fromJS(nextState))',!is(fromJS(this.state),fromJS(nextState)))

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

}

handleTag(param){

//this.handleData()

throttle(this.handleData,10,param).call(this)

}

handleData(){

const that = arguments[0]

const param = arguments[1]

that.state.Sort.length&&that.state.Sort.splice(that.state.Sort.findIndex(v => v.catCode === param.catCode), 1)

const moreAry = [...that.state.moreSortList,param]

that.reSort()

setTimeout(()=>{

that.setState({

moreSortList:JSON.parse(JSON.stringify(moreAry))

})

},0)

that.props.counterStore.dispatch('catList',that.state.Sort)

// 同时往moreSortList数组中增加内容并持久化

// const moreAry = JSON.parse(JSON.stringify(that.state.moreSortList))

//console.log(that.state.moreSortList,"moreSortList=====")

Taro.setStorageSync('moreSortList',moreAry)

}

addTag(item){

throttle(this.addData,10,item).call(this)

}

addData(){

// 删除更多分类中的选项

// 找一个当下不变的方法

const that = arguments[0]

const item = arguments[1]

that.state.moreSortList.length&&that.state.moreSortList.splice(that.state.moreSortList.findIndex(v => v.catCode === item.catCode), 1)

Taro.setStorageSync('moreSortList',that.state.moreSortList)

//从第二个位置插入

that.state.Sort.splice(2,0,item);

const sort = JSON.parse(JSON.stringify(that.state.Sort))

that.reSort()

// 1.不render的原因:立马就把值修改了相当于这次和上次的值是一样的所以不再刷新了而增加的时候是因为误操作了一个touchend事件导致state变化了还有moreSortList的变化

// 2.baidu小程序的特殊处理重新render的方式

that.setState({

Sort:sort

})

that.props.counterStore.dispatch('catList',that.state.Sort)

}

reSort(){

this.state.Sort.map((item,index)=>{

item.curIndex = index

return item

})

}

longTap(e){

e.stopPropagation();

if((this.state.beginIndex===0 || this.state.beginIndex ===1)){

// flag 不会变成true 下面的touchMove移动距离不会执行

return

}

this.setState({

x: e.currentTarget.offsetLeft,

y: e.currentTarget.offsetTop,

hidden: false,

flag:true

})

}

touchStart(item,e){

this.setState({

beginIndex:e.currentTarget.dataset.index

})

}

flagTag(endIndex){

return (endIndex===0 || endIndex ===1)

}

touchEnd(item,e){

e.stopPropagation();

if (!this.state.flag) {

return;

}

const x = e.changedTouches[0].pageX

const y = e.changedTouches[0].pageY

const list = this.state.elements

let data = this.state.Sort

var flags =false

for (let i = 0; i < data.length; i++) {

// 任何进入的都需要把虚线去掉

data[i].chosen = 0

if(i === data.length-1){

flags = true

}

for(var j = 0; j<list.length; j++){

const item = list[j];

if(x>item.left && x<item.right && y>item.top && y<item.bottom){

// 在拖动范围内的做换位操作否则不做换位操作

const beginIndex = this.state.beginIndex;

const endIndex = item.dataset.index;

//向后移动

if(!this.flagTag(endIndex)){

if (beginIndex < endIndex) {

let tem = data[beginIndex];

for (let i = beginIndex; i < endIndex; i++) {

data[i] = data[i + 1]

data[i].curIndex = i

}

// 结束位置是0或者1 不做换位操作

data[endIndex] = tem;

data[endIndex].curIndex = endIndex

}

//向前移动

if (beginIndex > endIndex) {

let tem = data[beginIndex];

for (let i = beginIndex; i > endIndex; i--) {

data[i] = data[i - 1]

data[i].curIndex = i

}

// 结束位置是0或者1 不做换位操作

data[endIndex] = tem;

data[endIndex].curIndex = endIndex

}

this.props.counterStore.dispatch('catList',data)

}

// 替换完成flag 为true 遮罩层隐藏

//this.props.counterStore.dispatch('catList',data)

}

this.setState({

flag: false,

hidden: true

})

// this.props.counterStore.dispatch('catList',data)

}

touchMove(item,e){

e.stopPropagation();

if(this.state.flag){

const x = e.touches[0].pageX

const y = e.touches[0].pageY

this.setState({

x: x-75,

y: y - 80

})

// 执行了拖拽操作的元素在拖拽过程中增加虚线框的操作

const list = this.state.elements

// Sort 是第一次render时候拿到的首页的sort列表

let data = this.state.Sort

for(var j = 0; j<list.length; j++){

const item = list[j];

if(x>item.left && x<item.right && y>item.top && y<item.bottom){

const endIndex = item.dataset.index;

// 如果结束位置是0 或者是1 则不增加虚线其他情况在移动过程中给结束位增加虚线

if(!this.flagTag(endIndex)){

data[endIndex].chosen = 1

}

// 开始位置赠加虚线

data[this.state.beginIndex].chosen = 1

}

//this.props.counterStore.dispatch('catList',data)

}

render () {

const { counterStore: { catList } } = this.props;

const {moreSortList} = this.state

// console.log('rendermoreSortList====',moreSortList)

if(Taro.getStorageSync('moreSortList')){

// console.log('Taro.getStorageSync',Taro.getStorageSync('moreSortList'))

const localMore = Taro.getStorageSync('moreSortList')

this.setState({

moreSortList:localMore

})

}

const newSort = catList.slice()

//const newSort = Taro.getStorageSync('catList')

// 不通过props刷新更新数据优化页面渲染速度

this.setState({

Sort:newSort

})

const cardItem = newSort.map((item,index)=>{

return <View key={item.curIndex} data-index={item.curIndex} onLongPress={this.longTap} onTouchStart={this.touchStart.bind(this,item)} onTouchMove={this.touchMove.bind(this,item)} onTouchEnd={this.touchEnd.bind(this,item)} className={`item ${item.chosen?'dash':''}`}>

<View>{`${item.catName}`}</View>

{index>1&&<Image src={chaPng} className='close' onClick={this.handleTag.bind(this,item)}></Image>}

</View>

})

const cardItem2 = moreSortList.length&&moreSortList.map((item,index)=>{

return <View class='item' key={item.curIndex} onClick={this.addTag.bind(this,item)}>

<View>{item.catName}</View>

</View>

})

return (

<Text className='tip'>点击可删除分类</Text>

</View>