uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）

照着腾讯文档小程序开发了微信小程序富文本编辑器组件，这几天做个整理，如有这个需求可以前往腾讯文档小程序 *** 作看看实际效果。毕竟参照的是微信自家小程序，无法做到百分百效果，只能按现有开放api尽可能实现。

项目地址：

>

准备开发小程序的企业、商家,在开发之前,一定要先弄清楚,自己需要一个什么样类型的小程序。那么,小程序的类型都有哪些一起看看吧~1电商类小程序电商类小程序是所有类型小程序里数量占比最大的,其中生鲜电商、母婴电商、时尚电商等细分行业的小程序的最多。电商小程序不仅可以实现商品展示、下单、付款等功能,还能跟踪快递,用起来非常方便。2预订类小程序随着互联网的发展,在出行之前,用网络预订酒店、机票、车票、餐饮,似乎已经成为一种习惯。在网上预订,不仅方便、快捷,而且有时候还可以享受到一定的优惠对于从事酒店、票务、餐饮行业的企业、商家而言,如果拥有自己的小程序,就可以让用户通过自己的平台进行预订,不仅有利于提升用户的体验,还能够省下一笔与第三方预订平台合作的费用。此外,小程序还可以与自己的官网、公众号配合使用,这样还也可以获取到更多的流量。3地区服务类小程序地区平台类也是一个小程序的类型,例如家政服务、美容美发、保洁服务等等。随着人们生活水平的提高,越来越多的人都喜欢“被服务”,因此地区服务类小程序也得到快速发展对于从事地区服务类的企业、商家而言,如果拥有自己的小程序,就可以通过附近的小程序等功能,让自己的门店、企业辐射到周边5KM内的人群,从而带来一定的流量。此外,在选择相关服务的时候,通常也更倾向于选择距离最近的服务商。所以,对于从事地区服务行业的企业、商家而言,小程序绝对是一个非常好的宣传推广、获客引流渠道。其实,小程序的类型还有很多,除上述几个之外,还有像健身场馆类、教育类、游戏类、工具类等等。所以,企业、商家们在做小程序之前,一定要先弄清,自己需要一个什么类型的小程序,小程序都需要哪些功能,这样才能使小程序顺利开发。

1使用内置组件scroll-view

2实现点击时出现的背景样式

3使用scroll-into-view，实现点击时自动滚动

前言

本次主要内容是介绍页面tab的开发，如何实现tab与页面内容联动呢？关注我就知道！

本次效果展示

一、如何实现页面tab

1使用内置组件scroll-view

如下图所示，我们需要使用到红色框框中的属性，此属性可也实现滚动

这里有一个大坑，不管是使用scroll-x还是scroll-y遍历数据都是出现在左边一数列（这里我们只关注scroll-x、scroll-y）

<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">

<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index"

:class="currentIndex==index'active':''" @click="changeTab(index)">

{{item}}

</view>

</scroll-view>

<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">

<view v-for="(item,index) in 100 " :key='index'>

{{item}}

</view>

</scroll-view>

我们只能通过样式来改变它，让它横过来

scroll-view-t view {

display: inline-block;

font-size: 32rpx !important;

margin: 0 15rpx;

}

scroll-view-t {

white-space: nowrap;

height: 88rpx;

line-height: 88rpx;

}

2实现点击时出现的背景样式

这里我们需要定义一个默认的索引currentIndex,在通过点击事件所传出去的索引进行判断，从而获得当前所点击的对象给到样式，样式我们就用三元表达式判断赋予样式，如下点击方法

changeTab(index) { //nabbar栏点击切换

// if (thiscurrentIndex === index) return

thiscurrentIndex = index

// thisscrollinto = 'tab' + index

// if (thiscurrentIndex < 10) {

// thisscrollinto = 'tab0'

// }

},

如下是绑定的点击事件和三元表达式判断赋予样式，其中背景样式提前写好了 

<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index"

:class="currentIndex==index'active':''" @click="changeTab(index)">

{{item}}

</view>

 不过现在只实现了通过点击样式发生改变，感觉实现了tab切换，眼下要解决点击时tab这个导航条也要自己滚动起来，不能一边手动滚动，然后再点击吧

3使用scroll-into-view，实现点击时自动滚动

使用它的目的主要是，在点解tab时可以实现，你向那个方向点，他就往那个方向滚动，不过在点回去的时候，就有坑了，需要对其作出判断 

 阅读文档很难理解对吧，我在这里说说我的理解，这里是想要我们通过在scroll-view中属性scroll-into-view绑定一个元素，此元素还要获得id,此id还不能已数字开头，此id就是移动的关键，需要绑定，所遍历内容的索引，从而实现往哪里滚动，不过想点回去就需要进行判断

如下代码中在scroll-view，使用scroll-into-view绑定了一个自己定义的空元素scrollinto

在v-for遍历后获得了索引，id就通过索引进行了绑定,拼接了以tab开头

<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">

<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index"

:class="currentIndex==index'active':''" @click="changeTab(index)">

{{item}}

</view>

</scroll-view>

实现点击滚动很简单，要滚动回去就要判断了，如下代码，只要当前的thisscrollinto = 'tab' + index就能实现点击就滚动，回去是就要判断当前点击的缩影，手动赋值，给一个最好的区间，这样效果更好

changeTab(index) { //nabbar栏点击切换

if (thiscurrentIndex === index) return

thiscurrentIndex = index

thisscrollinto = 'tab' + index

if (thiscurrentIndex < 10) {

thisscrollinto = 'tab0'

}

},

以上就是关于uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）全部的内容，包括:uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）、钉钉小程序新建目录样式不生效、小程序的一般类型有哪几种等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！