小程序备忘

小程序开发工具--详情--本地设置--启用自定义处理命令

用来执行脚本

为了提升用户 *** 作的流畅性，同时让用户在微信内拥有一致的 *** 作体验，“右滑手势返回”将成为基础配置，即所有小程序内都可以从屏幕左侧边缘向右滑动返回上一个界面。 在即将发布的705客户端版本中，页面配置中的 disableSwipeBack 属性将不再生效，请开发者及时调整。

背景图为fixed， top随滚动而改变 。 重点就是 onPageScroll 。

还可使用 scroll-view 的下拉刷新，且可以自定义样式。

用wxs监听滚动事件，设置样式。

不在以下 request 合法域名列表中，请参考文档

解决方案：在详情--本地设置中勾选“不校验合法域名。。。”

mode widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。应避免使用widthFix，尽量指定宽高。

导航栏高度

iOS 44px （4+32+8）

android 48px （8+32+8）

胶囊与状态栏间距（应该计算得出）ios 4px，Android 8px，与导航栏底边距8px（只能取固定值）。

胶囊高度 32px

状态栏高度，刘海屏通常为44px

setData 是小程序开发中使用最频繁、也是最容易引发性能问题的接口。

因此，开发者在调用 setData 时要注意：

数组索引不能直接用变量，解决方案：

取原来的值：

在onUnload中取消timer

微信小程序中，可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意，大部分组件是不支持该属性的。

目前支持 hover-class 属性的组件有三个：view、button、navigator。

不支持 hover-class 属性的组件，同时也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 这三个属性。

如果background写在wxml中，那么background-size也要写在style中，如果写在wxss中不会生效。

获取系统屏幕边框的安全距离：

safe-area-inset-top

safe-area-inset-right

safe-area-inset-bottom

safe-area-inset-left

ios11：constant（safe-area-inset-bottom）

ios112：env（safe-area-inset-bottom）

scroll-view的子元素最好包一层，不然宽度可能不起作用。

当小程序使用页面进行滚动时，可以给遮罩设置catchtouchmove属性来禁止页面滚动

在小程序内存在列表等形式的页面内增加下拉刷新功能，提高用户体验感，加强界面 *** 作与交互性；

<a name="gXpSi"></a>

1、小程序提供的下拉刷新（无法自定义刷新动画）

可能遇到的问题：

1）下拉时没有出现刷新的点点动画

可能是因为设置的页面背景色与点点动画一致导致无法看到动画，可以在页面配置中配置背景文字颜色：

2、scroll-view内refresher-enabled属性开启自定义刷新

基本库要求：2101

官方文档： scroll-view

3、原始scroll-view自定义下拉实现（为兼容2101一下的下拉刷新

通过监听手指移动距离控制需要下拉模块的下拉距离，主要事件bindtouchstart，bindtouchmove和bindtouchend，bindtouchmove记录手指开始下拉时的起始位置，bindtouchmove计算下拉距离，bindtouchend判断并实现刷新方法。

我的自定义下拉组件（Taro框架）

<a name="fEutw"></a>

1、与ios上橡皮筋效果冲突导致下拉无法触发自定义刷新

页面配置 disabledScroll ，禁止页面滚动，同时页面内的列表滚动需要自己再优化调整；

2、scroll-view的scroll问题

需要设定固定高度然后纵向滚动。[我都忘了是啥问题了……

3、页面下拉刷新结束后再滑动列表出现闪屏

在禁止页面橡皮筋效果后，如果页面内存在需滚动区域使用scroll-view效果比view更加流畅；

不设定固定高度不会发生闪屏但是页面滚动非常不流畅；

4、使用官方提供的scroll-view自定义的动画时，当scroll-view内容不足充满一屏时下拉出现问题

将scroll-view设置固定高度后，将其子元素的高度设置多一像素达到隐形撑满的效果。

5、scroll-view内fixed元素问题

ios内scroll-view内fixed元素层级会出现问题，可能出现被遮挡的问题。

6、当页面内局部需要下拉刷新时可能导致内外两个滚动条问题

一个是页面滚动条一个是scroll-view滚动条，由于 *** 作的时候触发的是scroll-view部分的滚动导致页面滚动无法进行从而影响页面其他 *** 作。

Q5和Q6可以合并成一个问题，当页面需要一个吸顶 *** 作时，即滑动距离超过阈值时导航条吸顶的功能，若scroll-view将整个页面包含就会出现Q5的问题，可能导致在ios内吸顶的导航栏无法显示，若scroll-view只包含需要刷新的部分则会出现Q6的两个滚动条的问题。

1）在页面未触发吸顶时禁止scroll-view模块下拉，触发后放开滚动，同时会导致无法下拉。

2）页面滚动触发，scroll-view模块可下拉，但是滚动区域无法滚动，且下拉动画只显示一次。

/

Desc: 俄罗斯方块游戏

By: hoodlum1980

Email: jinfd@126com

Date: 20080312 22：30

/

#include <stdioh>

#include <biosh>

#include <dosh>

#include <graphicsh>

#include <stringh>

#include <stdlibh>

#define true 1

#define false 0

#define BoardWidth 12

#define BoardHeight 23

#define _INNER_HELPER / inner helper method /

/Scan Codes Define/

enum KEYCODES

{

K_ESC =0x011b,

K_UP =0x4800, / upward arrow /

K_LEFT =0x4b00,

K_DOWN =0x5000,

K_RIGHT =0x4d00,

K_SPACE =0x3920,

K_P =0x1970

};

/ the data structure of the block /

typedef struct tagBlock

{

char c[4][4]; / cell fill info array, 0-empty, 1-filled /

int x; / block position cx [ 0,BoardWidht -1] /

int y; / block position cy [-4,BoardHeight-1] /

char color; / block color /

char size; / block max size in width or height /

char name; / block name (the block's shape) /

} Block;

/ game's global info /

int FrameTime= 1300;

int CellSize= 18;

int BoardLeft= 30;

int BoardTop= 30;

/ next block grid /

int NBBoardLeft= 300;

int NBBoardTop= 30;

int NBCellSize= 10;

/ score board position /

int ScoreBoardLeft= 300;

int ScoreBoardTop=100;

int ScoreBoardWidth=200;

int ScoreBoardHeight=35;

int ScoreColor=LIGHTCYAN;

/ infor text postion /

int InfoLeft=300;

int InfoTop=200;

int InfoColor=YELLOW;

int BorderColor=DARKGRAY;

int BkGndColor=BLACK;

int GameRunning=true;

int TopLine=BoardHeight-1; / top empty line /

int TotalScore=100;

char info_score[20];

char info_help[255];

char info_common[255];

/ our board, Board[x][y][0]-isFilled, Board[x][y][1]-fillColor /

unsigned char Board[BoardWidth][BoardHeight][2];

char BufferCells[4][4]; / used to judge if can rotate block /

Block curBlock; / current moving block /

Block nextBlock; / next Block to appear /

/ function list /

int GetKeyCode();

int CanMove(int dx,int dy);

int CanRotate();

int RotateBlock(Block block);

int MoveBlock(Block block,int dx,int dy);

void DrawBlock(Block block,int,int,int);

void EraseBlock(Block block,int,int,int);

void DisplayScore();

void DisplayInfo(char text);

void GenerateBlock(Block block);

void NextBlock();

void InitGame();

int PauseGame();

void QuitGame();

/Get Key Code /

int GetKeyCode()

{

int key=0;

if(bioskey(1))

{

key=bioskey(0);

}

return key;

}

/ display text! /

void DisplayInfo(char text)

{

setcolor(BkGndColor);

outtextxy(InfoLeft,InfoTop,info_common);

strcpy(info_common,text);

setcolor(InfoColor);

outtextxy(InfoLeft,InfoTop,info_common);

}

/ create a new block by key number,

the block anchor to the top-left corner of 44 cells

/

void _INNER_HELPER GenerateBlock(Block block)

{

int key=(random(13)random(17)+random(1000)+random(3000))%7;

block->size=3;/ because most blocks' size=3 /

memset(block->c,0,16);

switch(key)

{

case 0:

block->name='T';

block->color=RED;

block->c[1][0]=1;

block->c[1][1]=1, block->c[2][1]=1;

block->c[1][2]=1;

break;

case 1:

block->name='L';

block->color=YELLOW;

block->c[1][0]=1;

block->c[1][1]=1;

block->c[1][2]=1, block->c[2][2]=1;

break;

case 2:

block->name='J';

block->color=LIGHTGRAY;

block->c[1][0]=1;

block->c[1][1]=1;

block->c[1][2]=1, block->c[0][2]=1;

break;

case 3:

block->name='z';

block->color=CYAN;

block->c[0][0]=1, block->c[1][0]=1;

block->c[1][1]=1, block->c[2][1]=1;

break;

case 4:

block->name='5';

block->color=LIGHTBLUE;

block->c[1][0]=1, block->c[2][0]=1;

block->c[0][1]=1, block->c[1][1]=1;

break;

case 5:

block->name='o';

block->color=BLUE;

block->size=2;

block->c[0][0]=1, block->c[1][0]=1;

block->c[0][1]=1, block->c[1][1]=1;

break;

case 6:

block->name='I';

block->color=GREEN;

block->size=4;

block->c[1][0]=1;

block->c[1][1]=1;

block->c[1][2]=1;

block->c[1][3]=1;

break;

}

}

/ get next block! /

void NextBlock()

{

/ copy the nextBlock to curBlock /

curBlocksize=nextBlocksize;

curBlockcolor=nextBlockcolor;

curBlockx=(BoardWidth-4)/2;

curBlocky=-curBlocksize;

memcpy(curBlockc,nextBlockc,16);

/ generate nextBlock and show it /

EraseBlock(&nextBlock,NBBoardLeft,NBBoardTop,NBCellSize);

GenerateBlock(&nextBlock);

nextBlockx=1,nextBlocky=0;

DrawBlock(&nextBlock,NBBoardLeft,NBBoardTop,NBCellSize);

}

/ rotate the block, update the block struct data /

int _INNER_HELPER RotateCells(char c[4][4],char blockSize)

{

char temp,i,j;

switch(blockSize)

{

case 3:

temp=c[0][0];

c[0][0]=c[2][0], c[2][0]=c[2][2], c[2][2]=c[0][2], c[0][2]=temp;

temp=c[0][1];

c[0][1]=c[1][0], c[1][0]=c[2][1], c[2][1]=c[1][2], c[1][2]=temp;

break;

case 4: / only 'I' block arived here! /

c[1][0]=1-c[1][0], c[1][2]=1-c[1][2], c[1][3]=1-c[1][3];

c[0][1]=1-c[0][1], c[2][1]=1-c[2][1], c[3][1]=1-c[3][1];

break;

}

}

/ judge if the block can move toward the direction /

int CanMove(int dx,int dy)

{

int i,j,tempX,tempY;

for(i=0;i<curBlocksize;i++)

{

for(j=0;j<curBlocksize;j++)

{

if(curBlockc[i][j])

{

/ cannot move leftward or rightward /

tempX = curBlockx + i + dx;

if(tempX<0 || tempX>(BoardWidth-1)) return false; / make sure x is valid! /

/ cannot move downward /

tempY = curBlocky + j + dy;

if(tempY>(BoardHeight-1)) return false; / y is only checked lower bound, maybe negative!!!! /

/ the cell already filled, we must check Y's upper bound before check cell ! /

if(tempY>=0 && Board[tempX][tempY][0]) return false;

}

}

}

return true;

}

/ judge if the block can rotate /

int CanRotate()

{

int i,j,tempX,tempY;

/ update buffer /

memcpy(BufferCells, curBlockc, 16);

RotateCells(BufferCells,curBlocksize);

for(i=0;i<curBlocksize;i++)

{

for(j=0;j<curBlocksize;j++)

{

if(BufferCells[i][j])

{

tempX=curBlockx+i;

tempY=curBlocky+j;

if(tempX<0 || tempX>(BoardWidth-1))

return false;

if(tempY>(BoardHeight-1))

return false;

if(tempY>=0 && Board[tempX][tempY][0])

return false;

}

}

}

return true;

}

/ draw the block /

void _INNER_HELPER DrawBlock(Block block,int bdLeft,int bdTop,int cellSize)

{

int i,j;

setfillstyle(SOLID_FILL,block->color);

for(i=0;i<block->size;i++)

{

for(j=0;j<block->size;j++)

{

if(block->c[i][j] && (block->y+j)>=0)

{

floodfill(

bdLeft+cellSize(i+block->x)+cellSize/2,

bdTop+cellSize(j+block->y)+cellSize/2,

BorderColor);

}

}

}

}

/ Rotate the block, if success, return true /

int RotateBlock(Block block)

{

char temp,i,j;

int b_success;

if(curBlocksize==2)

return;

if(( b_success=CanRotate()))

{

EraseBlock(block,BoardLeft,BoardTop,CellSize);

memcpy(curBlockc,BufferCells,16);

DrawBlock(block,BoardLeft,BoardTop,CellSize);

}

return b_success;

}

/ erase a block, only fill the filled cell with background color /

void _INNER_HELPER EraseBlock(Block block,int bdLeft,int bdTop,int cellSize)

{

int i,j;

setfillstyle(SOLID_FILL,BkGndColor);

for(i=0;i<block->size;i++)

{

for(j=0;j<block->size;j++)

{

if(block->c[i][j] && (block->y+j>=0))

{

floodfill(

bdLeft+cellSize(i+block->x)+cellSize/2,

bdTop+cellSize(j+block->y)+cellSize/2,

BorderColor);

}

}

}

}

/ move by the direction if can, donothing if cannot

return value: true - success, false - cannot move toward this direction

/

int MoveBlock(Block block,int dx,int dy)

{

int b_canmove=CanMove(dx,dy);

if(b_canmove)

{

EraseBlock(block,BoardLeft,BoardTop,CellSize);

curBlockx+=dx;

curBlocky+=dy;

DrawBlock(block,BoardLeft,BoardTop,CellSize);

}

return b_canmove;

}

/ drop the block to the bottom! /

int DropBlock(Block block)

{

EraseBlock(block,BoardLeft,BoardTop,CellSize);

while(CanMove(0,1))

{

curBlocky++;

}

DrawBlock(block,BoardLeft,BoardTop,CellSize);

return 0;/ return value is assign to the block's alive /

}

/ init the graphics mode, draw the board grid /

void InitGame()

{

int i,j,gdriver=DETECT,gmode;

struct time sysTime;

/ draw board cells /

memset(Board,0,BoardWidthBoardHeight2);

memset(nextBlockc,0,16);

strcpy(info_help,"P: Pause Game --by hoodlum1980");

initgraph(&gdriver,&gmode,"c:\\tc\\");

setcolor(BorderColor);

for(i=0;i<=BoardWidth;i++)

{

line(BoardLeft+iCellSize, BoardTop, BoardLeft+iCellSize, BoardTop+ BoardHeightCellSize);

}

for(i=0;i<=BoardHeight;i++)

{

line(BoardLeft, BoardTop+iCellSize, BoardLeft+BoardWidthCellSize, BoardTop+ iCellSize);

}

/ draw board outer border rect /

rectangle(BoardLeft-CellSize/4, BoardTop-CellSize/4,

BoardLeft+BoardWidthCellSize+CellSize/4,

BoardTop+BoardHeightCellSize+CellSize/4);

/ draw next block grids /

for(i=0;i<=4;i++)

{

line(NBBoardLeft+iNBCellSize, NBBoardTop, NBBoardLeft+iNBCellSize, NBBoardTop+4NBCellSize);

line(NBBoardLeft, NBBoardTop+iNBCellSize, NBBoardLeft+4NBCellSize, NBBoardTop+ iNBCellSize);

}

/ draw score rect /

rectangle(ScoreBoardLeft,ScoreBoardTop,ScoreBoardLeft+ScoreBoardWidth,ScoreBoardTop+ScoreBoardHeight);

DisplayScore();

/ set new seed! /

gettime(&sysTime);

srand(sysTimeti_hour3600+sysTimeti_min60+sysTimeti_sec);

GenerateBlock(&nextBlock);

NextBlock(); / create first block /

setcolor(DARKGRAY);

outtextxy(InfoLeft,InfoTop+20,"Up -rotate Space-drop");

outtextxy(InfoLeft,InfoTop+35,"Left-left Right-right");

outtextxy(InfoLeft,InfoTop+50,"Esc -exit");

DisplayInfo(info_help);

}

/ set the isFilled and fillcolor data to the board /

void _INNER_HELPER FillBoardData()

{

int i,j;

for(i=0;i<curBlocksize;i++)

{

for(j=0;j<curBlocksize;j++)

{

if(curBlockc[i][j] && (curBlocky+j)>=0)

{

Board[curBlockx+i][curBlocky+j][0]=1;

Board[curBlockx+i][curBlocky+j][1]=curBlockcolor;

}

}

}

}

/ draw one line of the board /

void _INNER_HELPER PaintBoard()

{

int i,j,fillcolor;

for(j=max((TopLine-4),0);j<BoardHeight;j++)

{

for(i=0;i<BoardWidth;i++)

{

fillcolor=Board[i][j][0] Board[i][j][1]:BkGndColor;

setfillstyle(SOLID_FILL,fillcolor);

floodfill(BoardLeft+iCellSize+CellSize/2,BoardTop+jCellSize+CellSize/2,BorderColor);

}

}

}

/ check if one line if filled full and increase the totalScore! /

void _INNER_HELPER CheckBoard()

{

int i,j,k,score=10,sum=0,topy,lines=0;

/ we find the top empty line! /

j=topy=BoardHeight-1;

do

{

sum=0;

for(i=0;i< BoardWidth; i++)

{

sum+=Board[i][topy][0];

}

topy--;

} while(sum>0 && topy>0);

/ remove the full filled line (max remove lines count = 4) /

do

{

sum=0;

for(i=0;i< BoardWidth; i++)

sum+=Board[i][j][0];

if(sum==BoardWidth)/ we find this line is full filled, remove it! /

{

/ move the cells data down one line /

for(k=j; k > topy;k--)

{

for(i=0;i<BoardWidth;i++)

{

Board[i][k][0]=Board[i][k-1][0];

Board[i][k][1]=Board[i][k-1][1];

}

}

/ make the top line empty! /

for(i=0;i<BoardWidth;i++)

{

Board[i][topy][0]=0;

Board[i][topy][1]=0;

}

topy++; / move the topline downward one line! /

lines++; / lines <=4 /

TotalScore+=score;

score=2; / adding: 10, 30, 70, 150 /

}

else

j--;

} while(sum>0 && j>topy && lines<4);

/ speed up the game when score is high, minimum is 400 /

FrameTime=max(1200-100(TotalScore/200), 400);

TopLine=topy;/ update the top line /

/ if no lines remove, only add 1: /

if(lines==0)

TotalScore++;

}

/ display the score /

void _INNER_HELPER DisplayScore()

{

setcolor(BkGndColor);

outtextxy(ScoreBoardLeft+5,ScoreBoardTop+5,info_score);

setcolor(ScoreColor);

sprintf(info_score,"Score: %d",TotalScore);

outtextxy(ScoreBoardLeft+5,ScoreBoardTop+5,info_score);

}

/ we call this function when a block is inactive /

void UpdateBoard()

{

FillBoardData();

CheckBoard();

PaintBoard();

DisplayScore();

}

/ pause the game, and timer handler stop move down the block! /

int PauseGame()

{

int key=0;

DisplayInfo("Press P to Start or Resume!");

while(key!=K_P && key!=K_ESC)

{

while(!(key=GetKeyCode())){}

}

DisplayInfo(info_help);

return key;

}

/ quit the game and do cleaning work /

void QuitGame()

{

closegraph();

}

/ the entry point function /

void main()

{

int i,flag=1,j,key=0,tick=0;

InitGame();

if(PauseGame()==K_ESC)

goto GameOver;

/ wait until a key pressed /

while(key!=K_ESC)

{

/ wait until a key pressed /

while(!(key=GetKeyCode()))

{

tick++;

if(tick>=FrameTime)

{

/ our block has dead! (can't move down), we get next block /

if(!MoveBlock(&curBlock,0,1))

{

UpdateBoard();

NextBlock();

if(!CanMove(0,1))

goto GameOver;

}

tick=0;

}

delay(100);

}

switch(key)

{

case K_LEFT:

MoveBlock(&curBlock,-1,0);

break;

case K_RIGHT:

MoveBlock(&curBlock,1,0);

break;

case K_DOWN:

MoveBlock(&curBlock,0,1);

break;

case K_UP:

RotateBlock(&curBlock);

break;

case K_SPACE:

DropBlock(&curBlock);

break;

case K_P:

PauseGame();

break;

}

}

GameOver:

DisplayInfo("GAME OVER! Press any key to exit!");

getch(); / wait the user Press any key /

QuitGame();

}

俄罗斯方块的C语言实现，在WIN-TC上编译通过。

最初打算使用scroll-view实现，效果好、流畅、有惯性滑动，但由于滚动条没法去掉、无法实现上下层的帧布局，最终放弃了。 还是自己写个吧，利用手势事件。遗憾的是小程序中目前没有像Android中快速滑动事件，所以，要实现惯性滑动是不可能了。 item的布局： 推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。 <view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTeam/images/20150928/tooopen_sy_143912755726jpg" mode="scaleToFill"></image> <view class="number-wrapper"> <text class="name">{{cardTeamname}}</text> <view class="count-wrapper"> <view class="decrease-btn">-</view> <text class="count">1</text> <view class="increase-btn">+</view> </view> <view class="price-wrapper"> <text class="unit">¥</text> <text class="price">9980</text> </view> </view> <view class="ok"><view class="inner-ok">确定</view></view> <view class="remove" data-id="{{cardTeamid}}" bindtap="delItem"><view>删除</view></view> </view> 主要是将删除按钮的设为绝对定位(position: absolute)： item remove{ width: 60px; height: 100%; background-color: red; position: absolute; top: 0; right: -60px; display: flex; justify-content: center; align-items: center; } Page({ data: { cardTeams:[{"id":"aaaaa", "name":"android教程", "url":"", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"", "right":0, "startRight":0}] }, drawStart : function(e){ // consolelog("drawStart"); var touch = etouches[0]; startX = touchclientX; startY = touchclientY; var cardTeams = thisdatacardTeams; for(var i in cardTeams){ var data = cardTeams[i]; datastartRight = dataright; } key = true; }, drawEnd : function(e){ consolelog("drawEnd"); var cardTeams = thisdatacardTeams; for(var i in cardTeams){ var data = cardTeams[i]; if(dataright <= 100/2){ dataright = 0; }else{ dataright = maxRight; } } thissetData({ cardTeams:cardTeams }); }, drawMove : function(e){ //consolelog("drawMove"); var self = this; var dataId = ecurrentTargetid; var cardTeams = thisdatacardTeams; if(key){ var touch = etouches[0]; endX = touchclientX; endY = touchclientY; consolelog("startX="+startX+" endX="+endX ); if(endX - startX == 0) return ; var res = cardTeams; //从右往左 if((endX - startX) < 0){ for(var k in res){ var data = res[k]; if(res[k]id == dataId){ var startRight = res[k]startRight; var change = startX - endX; startRight += change; if(startRight > maxRight) startRight = maxRight; res[k]right = startRight; } } }else{//从左往右 for(var k in res){ var data = res[k]; if(res[k]id == dataId){ var startRight = res[k]startRight; var change = endX - startX; startRight -= change; if(startRight < 0) startRight = 0; res[k]right = startRight ; } } } selfsetData({ cardTeams:cardTeams }); } }, //删除item delItem: function(e){ var dataId = etargetdatasetid; consolelog("删除"+dataId); var cardTeams = thisdatacardTeams; var newCardTeams = []; for(var i in cardTeams){ var item = cardTeams[i]; if(itemid != dataId){ newCardTeamspush(item); } } thissetData({ cardTeams:newCardTeams }); }, onLoad: function () { consolelog('onLoad:'+appglobalDatadomain) } }) drawStart用于记录手指触碰时的位置，drawMove记录手指滑动的位置，两者的差值就是删除按钮的偏移量 drawEnd手指抬起时触发，用于设置d回、摊开效果。目前我的是超过一半自动d开，不足一半自动收回。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

taro单独为某个项目切换taro版本环境

单独为某一个项目升级#这样做的好处是全局的 Taro 版本还是 1x 的，多个项目间的依赖不冲突，其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI，你需要先装一个：

# 如果你使用 NPM

$ npm install --save-dev @tarojs/cli@2x

# 如果你使用 Yarn

$ yarn add -D @tarojs/cli@2x

echarts在小程序中滑动卡顿

由于微信小程序中，echarts的层级最高，无论设置多大层级也无法遮住echarts。而且小程序中好像只能用echarts吧。所以为了解决这个bug，我只能委屈求全了。打开ec-canvaswxml文件，将touchStart、touchMove和touchEnd去掉了，直接删除就好啦。这三个事件应该是做缩放的吧，我们也没有这个缩放的需求。所以就去掉了。虽然暂时满足的需求，还是没有真正的解决问题。

原：

bindinit="init"

bindtouchstart="{{ ecdisableTouch '' : 'touchStart' }}"

bindtouchmove="{{ ecdisableTouch '' : 'touchMove' }}"

bindtouchend="{{ ecdisableTouch '' : 'touchEnd' }}"

现：

bindinit="init"

echarts在小程序中无法跟随页面滑动

在卡顿问题中能与echarts交互少的，可以直接使用代替cannvas，即在echarts渲染完毕后将它替换为一张。

如果我更新了数据，那么就重新放出echarts，等它渲染完毕后，再次替换为一张。

charton('finished', () => {

getCurrentInstance()pageselectComponent(id)canvasToTempFilePath({

success: res => {

consolelog('restempFilePath====',restempFilePath)

thissetState({

echartImgSrc: restempFilePath

      })

},

    fail: res =>consolelog('转换失败', res)

});

})

render:

thisstateechartImgSrc ==''

  ref={thisrefChart}

id={thisstateid}

canvas-id="mychart-area"

  force-use-old-canvas="true"

  ec={thisstateec}

/>

:

<CoverImage src={thisstateechartImgSrc}></CoverImage>

以上就是关于小程序备忘全部的内容，包括:小程序备忘、[wx]微信小程序自定义下拉刷新、帮忙编写小游戏c语言小程序 谢谢等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！