背景是这样的，微信小程序有一个tab切换页面，tab切换页面有两个内容框，我是使用scroll-view进行制作，然后在切换tab页面时，相应的scroll-view里的滚动条需要置顶处理。【相关学习推荐：小程序开发教程】
我们可以看到官方文档描述scroll-view里有一个scroll-into-view属性，该属性的描述如下
scroll-into-view的值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
那么我们可以在这个属性里大作文章，只要在scroll-view里放置一个id值为设置的一个自定义值就可以实现切换tab时，对应的内容框滚动条都自动滚到顶部，如下面代码所示，下面代码是我使用Taro小程序框架演示的，原生的也同理。
import Taro from '@Tarojs/Taro'
import { View } from '@Tarojs/components'
import { AtTabs, AtTabsPane } from 'Taro-ui'
export default class Index extends Taro.Component {
constructor () {
super(...arguments)
this.state = {
current: 0,
}
}
handleClick (value) {
this.setState({
current: value
})
}
render () {
const tabList = [{ title: '标签第一页' }, { title: '标签第二页' }, { title: '标签第三页' }]
return (
<AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
<AtTabsPane current={this.state.current} index={0} >
<ScrollView scrollY scrollIntoView='content-0'>
<View id='content-0'></View>
标签页一的内容
</ScrollView>
</AtTabsPane>
<AtTabsPane current={this.state.current} index={1} >
<ScrollView scrollY scrollIntoView='content-1'>
<View id='content-1'></View>
标签页二的内容
</ScrollView>
</AtTabsPane>
<AtTabsPane current={this.state.current} index={2} >
<ScrollView scrollY scrollIntoView='content-2'>
<View id='content-2'></View>
标签页三的内容
</ScrollView>
</AtTabsPane>
</AtTabs>
)
}
}
如第一个tab的scroll-view里放置一个id值为content-0的view，那么在切换tab页时，scroll-view会根据我们设置的scroll-into-view属性定位到子元素的id上，到达滚动条自动置顶的效果
<AtTabsPane current={this.state.current} index={0} >
<ScrollView scrollY scrollIntoView='content-0'>
<View id='content-0'></View>
标签页一的内容
</ScrollView>
</AtTabsPane>
同理的，假如需要滚动条滚到最低下，把相应的子元素id放到最低下即可，例如某些聊天界面，需要定位到最新那条
<AtTabsPane current={this.state.current} index={0} >
<ScrollView scrollY scrollIntoView='content-0'>
标签页一的内容
<View id='content-0'></View>
</ScrollView>
</AtTabsPane>
更多编程相关知识，请访问：编程视频！！
照着腾讯文档小程序开发了微信小程序富文本编辑器组件，这几天做个整理，如有这个需求可以前往腾讯文档小程序 *** 作看看实际效果。毕竟参照的是微信自家小程序，无法做到百分百效果，只能按现有开放api尽可能实现。
项目地址：
https://github.com/chellel/wechat-editor-project
uniapp插件市场：
https://ext.dcloud.net.cn/plugin?id=6365
editor富文本编辑器组件官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
否则会受到小程序css影响。小程序本身editor标签有css样式：
editor {
display: block
position: relative
box-sizing: border-box
-webkit-user-select: text
user-select: text
outline: 0
overflow: hidden
width: 100%
height: 200px
min-height: 200px
}
that.updatePosition(keyboardHeight)
that.editorCtx.scrollIntoView()
在插入目标文字时，将值设为\n'，可以实现换行
this.editorCtx.insertText({ text: '\n' })
参考：请问editor组件控制拉起键盘 *** 作支持吗？
https://developers.weixin.qq.com/community/develop/doc/0006eeb6ae8cf0e7f3293e13f56400?highLine=editor%25E6%2598%25BE%25E7%25A4%25BA%25E9%2594%25AE%25E7%259B%2598
小程序技术专员-sanford 2019-09-20
不支持的。iOS无法通过接口拉起键盘，必须用户点击；安卓则可以。所以，终究是不一致，不行。。
该组件主要为微信editor组件的api调用集成封装，因此受到的限制同文档描述一致，即编辑器内支持部分 HTML 标签和内联样式，不支持class和id，支持的标签详见： https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 。
不满足的标签会被忽略，<div>会被转行为<p>储存。
这也是为什么在做富文本解析时，仅仅用rich-text组件无法有效还原html内容，在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签。因此最好方式是引入市场封装好的富文本解析插件去解析html。
所以，开发者需要自行权衡在做富文本编辑开发时，是否使用微信自带的editor组件，或者参考腾讯文档小程序采用webview内嵌网页等方式去渲染。
小程序富文本编辑器editor初体验：( https://www.jianshu.com/p/a932639ba7a6 )
如果是微信原生开发，将demo组件中的相关dom元素标签和api换成微信原生即可。
把这些下拉菜单的AutoPostBack属性设置成false，就不会每选一次都刷新页面了。为了更新所录入的数据，可以添加一个“更新”(也可叫“提交”)按钮，此时再PostBack执行数据库的SQL UPDATE INSERT指令。
问题补充：二楼大侠说的方法我已经想到了，但是问题在于我需要随时根据下拉菜单的数值来进行运算并作出提示，不刷新不方便。
我想要的是 既能刷新又能定位的方法。
=====================================================================
如果你一定要AutoPostback的话，可以用客户端Javascript来实现自动窗口滚动。
首先，你需要一个隐藏字段来存储你所点击的下拉菜单的当前位置:
<asp:HiddenField ID="HiddenField1" runat="server" />
其次，需要修改<body>标记， 改成：<body runat="server" id="bodyID">
这样才可以在服务器端对它进行修改。
你还要修改你的下拉菜单标记，加一条客户端事件响应，类似于这样：
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" onchange="HiddenField1.value = this.offsetTop">
处理onchange事件，这样当它的内容改变，准备Postback前，会把当前坐标存到HiddenField1中。
最后，在你的页面的Page_Load事件处理中加上一条：
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack)
{
this.bodyID.Attributes.Add("onload", "window.scrollTo(0," + this.HiddenField1.Value + ")")
}
}
当页面再次刷新时，就会自动卷动到你最后的下拉菜单的位置了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）