兄弟, 你需要给scrollView一个固定的高度,可以用wx.getSystemInfoSync() 动态获取 windowHeight, 这样就可以了, 为了稳妥起见,要给scroll-view 设置高度才能实现。
this.setDate不渲染问题<view class="flex box box-lr" style='background-color: #eee;'> <scroll-view class="flex groups box box-tb" scroll-y="true" scroll-into-view="{{scrollIntoView}}"> <block wx:for="{{groups}}" wx:for-item="group"> <view class="flex" id="{{group.groupName}}"> <view class="group-name">{{group.groupName}}</view> <view class="flex group-users"> <view wx:for="{{group.users}}" wx:for-item="user" wx:for-index="idx" class="user box box-lr"> <view> <checkbox></checkbox> </view> <view class="flex user-name">{{user.name}}</view> </view> </view> </view> </block> </scroll-view> <view class="nav box box-tb" bindtouchmove="touchmove" bindtouchcancel="touchcancel" bindtouchend="touchend"> <view bindtap="tabLetter" data-index="{{item}}" wx:for="{{letters}}" class="flex box box-align-center box-pack-center letter"> <text class="letter-text {{selected == item ? 'letter-actived' : ''}}">{{item}}</text> </view> </view> </view> ------------------------------js代码 onLoad: function (options) { const res = wx.getSystemInfoSync(), letters = this.data.letters; // 设备信息 this.setData({ windowHeight: res.windowHeight, windowWidth: res.windowWidth, pixelRatio: res.pixelRatio }); // 第一个字母距离顶部高度,css中定义nav高度为94%,所以 *0.94 const navHeight = this.data.windowHeight * 0.94, // eachLetterHeight = navHeight / 26, comTop = (this.data.windowHeight - navHeight) / 2, temp = []; this.setData({ eachLetterHeight: eachLetterHeight }); // 求各字母距离设备左上角所处位置 for (let i = 0, len = letters.length; i < len; i++) { const x = this.data.windowWidth - (10 + 50) / this.data.pixelRatio, y = comTop + (i * eachLetterHeight); temp.push([x, y]); } this.setData({ lettersPosition: temp }) }, tabLetter(e) { const index = e.currentTarget.dataset.index; //this.data.selected = index; //this.data.scrollIntoView = index; console.log(this); this.setData({ selected: index, scrollIntoView: index }) this.cleanAcitvedStatus(); }, // 清除字母选中状态 cleanAcitvedStatus() { setTimeout(() => { this.setData({ selected: 0 }) }, 500); }, touchmove(e) { const x = e.touches[0].clientX, y = e.touches[0].clientY, lettersPosition = this.data.lettersPosition, eachLetterHeight = this.data.eachLetterHeight, letters = this.data.letters; // 判断触摸点是否在字母导航栏上 if (x >= lettersPosition[0][0]) { for (let i = 0, len = lettersPosition.length; i < len; i++) { // 判断落在哪个字母区域,取出对应字母所在数组的索引,根据索引更新selected及scroll-into-view的值 const _y = lettersPosition[i][1], // 单个字母所处高度 __y = _y + eachLetterHeight; // 单个字母最大高度取值范围 if (y >= _y && y <= __y) { this.setData({ selected: letters[i], scrollIntoView: letters[i] }); break; } } } } 这是可以的代码,但我在wxml的代码里最外层嵌套了一层view标签,就不重新渲染页面了,求解
2018-07-05兄弟,我是这样写的,没遇到什么问题,你参考下: [代码]<[代码][代码]scroll-view[代码] [代码]class[代码][代码]=[代码][代码]'section_list2'[代码] [代码]scroll-x[代码][代码]=[代码][代码]"{{true}}"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'section_list2_item'[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{recommendData.artist.child}}"[代码] [代码]wx:key[代码][代码]=[代码][代码]"{{index}}"[代码] [代码]data-index[代码][代码]=[代码][代码]'{{index}}'[代码] [代码]bindtap[代码][代码]=[代码][代码]"goArtistDetail"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'icon'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]sd-image[代码] [代码]src[代码][代码]=[代码][代码]'{{item.extInfo.avatarLink}}'[代码][代码]/>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'title line_1'[代码][代码]>{{item.extInfo.name}}</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'sub-title line_1'[代码][代码]>{{item.extInfo.introduction}}</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]scroll-view[代码][代码]>[代码][代码].section_list[代码][代码]2[代码] [代码]{[代码][代码] [代码][代码]white-space[代码][代码]: [代码][代码]nowrap[代码][代码];[代码][代码] [代码][代码]margin-top[代码][代码]: [代码][代码]36[代码][代码]rpx;[代码][代码]}[代码][代码].section_list[代码][代码]2[代码][代码]_item {[代码][代码] [代码][代码]display[代码][代码]: inline-flex;[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]240[代码][代码]rpx;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: column;[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码]}[代码][代码].section_list[代码][代码]2[代码][代码]_item:first-child {[代码][代码] [代码][代码]margin-left[代码][代码]: [代码][代码]16[代码][代码]rpx; [代码][代码]}[代码][代码].section_list[代码][代码]2[代码][代码]_item:last-child {[代码][代码] [代码][代码]margin-right[代码][代码]: [代码][代码]16[代码][代码]rpx;[代码][代码]}[代码][代码].section_list[代码][代码]2[代码][代码]_item .[代码][代码]icon[代码] [代码]{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]160[代码][代码]rpx;[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]160[代码][代码]rpx;[代码][代码] [代码][代码]border-radius: [代码][代码]80[代码][代码]rpx;[代码][代码] [代码][代码]overflow[代码][代码]: [代码][代码]hidden[代码][代码];[代码][代码]}[代码][代码].section_list[代码][代码]2[代码][代码]_item .title {[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]28[代码][代码]rpx;[代码][代码] [代码][代码]line-height[代码][代码]: [代码][代码]40[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#333[代码][代码];[代码][代码] [代码][代码]font-family[代码][代码]: PingFangSC-Medium;[代码][代码] [代码][代码]margin-top[代码][代码]: [代码][代码]24[代码][代码]rpx;[代码][代码]}[代码][代码].section_list[代码][代码]2[代码][代码]_item .sub-title {[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]24[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#999[代码][代码];[代码][代码] [代码][代码]line-height[代码][代码]: [代码][代码]34[代码][代码]rpx;[代码][代码] [代码][代码]margin-bottom[代码][代码]: [代码][代码]20[代码][代码]rpx;[代码][代码] [代码][代码]max-width[代码][代码]: [代码][代码]200[代码][代码]rpx;[代码][代码]}[代码]
scrollview不兼容iOS9.3.5在 iPhone手机 系统是iOS9.3.5 上显示的是如下的异常效果。 [图片] 正常的显示应该如下 [图片] 现在把关键代码和样式贴下 wxml [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'section'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]navigator[代码] [代码]url[代码][代码]=[代码][代码]'/pages/user/enjoy'[代码] [代码]class[代码][代码]=[代码][代码]'head'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'title'[代码][代码]>我喜欢的方案</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]image[代码] [代码]src[代码][代码]=[代码][代码]'{{imgMap.arrowUp}}'[代码][代码]></[代码][代码]image[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]navigator[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]scroll-view[代码] [代码]scroll-x>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'content'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]block[代码] [代码]wx:if='{{myEnjoyList.length > 0}}'>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'item'[代码] [代码]wx:for[代码][代码]=[代码][代码]'{{myEnjoyList}}'[代码] [代码]wx:key[代码][代码]=[代码][代码]'enjoyItem{{index}}'[代码] [代码]data-index[代码][代码]=[代码][代码]'{{index}}'[代码] [代码]bindtap[代码][代码]=[代码][代码]'onTapEnjoyItem'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]image[代码] [代码]src[代码][代码]=[代码][代码]'{{item.imgsrc}}'[代码] [代码]/>[代码][代码] [代码][代码]<[代码][代码]view[代码][代码]>{{item.title}}</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]block[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]wx:else [代码][代码]class[代码][代码]=[代码][代码]'empty'[代码][代码]>您还没有收藏过喜欢的方案哦!</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]scroll-view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] wxss [代码].section {[代码][代码] [代码][代码]background-color[代码][代码]: [代码][代码]white[代码][代码];[代码][代码]}[代码] [代码].section .head {[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: row;[代码][代码] [代码][代码]justify-[代码][代码]content[代码][代码]: space-between;[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]padding[代码][代码]: [代码][代码]0[代码] [代码]30[代码][代码]rpx;[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]118[代码][代码]rpx;[代码][代码]}[代码] [代码].section .head .title {[代码][代码] [代码][代码]font-weight[代码][代码]: [代码][代码]bold[代码][代码];[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]36[代码][代码]rpx;[代码][代码]}[代码] [代码].section .head image {[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]32[代码][代码]rpx;[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]32[代码][代码]rpx;[代码][代码] [代码][代码]transform: rotate([代码][代码]90[代码][代码]deg);[代码][代码] [代码][代码]opacity: [代码][代码]0.4[代码][代码];[代码][代码] [代码][代码]filter: alpha(opacity=[代码][代码]40[代码][代码]);[代码][代码]}[代码] [代码].content {[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]230[代码][代码]rpx;[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]auto[代码][代码];[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: row;[代码][代码] [代码][代码]background-color[代码][代码]: [代码][代码]#fdfdfd[代码][代码];[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]padding[代码][代码]: [代码][代码]0[代码] [代码]20[代码][代码]rpx;[代码][代码]}[代码] [代码].content .item {[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: column;[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]padding-right[代码][代码]: [代码][代码]20[代码][代码]rpx;[代码][代码]}[代码] [代码].content .item image {[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]150[代码][代码]rpx;[代码][代码] [代码][代码]border-radius: [代码][代码]6[代码][代码]rpx;[代码][代码]}[代码] [代码].content .item view {[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]28[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#666[代码][代码];[代码][代码] [代码][代码]margin-top[代码][代码]: [代码][代码]10[代码][代码]rpx;[代码][代码] [代码][代码]white-space[代码][代码]: [代码][代码]nowrap[代码][代码];[代码][代码] [代码][代码]text-[代码][代码]overflow[代码][代码]: ellipsis;[代码][代码] [代码][代码]overflow[代码][代码]: [代码][代码]hidden[代码][代码];[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]270[代码][代码]rpx;[代码][代码] [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]}[代码] [代码].space {[代码][代码] [代码][代码]border-top[代码][代码]: [代码][代码]20[代码][代码]rpx [代码][代码]#eee[代码] [代码]solid[代码][代码];[代码][代码]}[代码] [代码].empty {[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]justify-[代码][代码]content[代码][代码]: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]32[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#999[代码][代码];[代码][代码]}[代码] 其他android手机或开发工具都正常显示,目前发现就只有在 iOS9.3.5( iOS9的其他版本没测过)出现问题。
2018-06-28