jd-opensource / jd-opensource/taro-ui

AtTabs 在小程序中将at-tabs__header 设置为position: fixed, 在iphone中看不到at-tabs__header

Open
#666 3 comments 0 reactions 0 assignees View on GitHub
help wanted stale
Dominant language
TypeScript
Stars
4.7k
Forks
740
PR merge metrics
No merged PRs in 30d

Description

**问题描述**
AtTabs 在小程序中将at-tabs__header 设置为position: fixed, 在iphone中看不到at-tabs__header

**复现步骤**

```js
// 这里可以贴代码
import Taro, { Component } from '@tarojs/taro'
import { View, Image, ScrollView } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtDivider, AtActivityIndicator } from 'taro-ui'
import { observer, inject } from '@tarojs/mobx'
import CouponsItem from '../../../components/couponsItem'
import WeApi from '../../../constants/api'

import './index.less'

@inject('counterStore')
@observer
class Coupons extends Component {
constructor () {
super(...arguments)
this.state = {
current: 0,
nowPage: 1,
loading: false,
isLast: 1,
couponsList: [], // 优惠券列表
usedCouponsList: [], // 已使用优惠券列表
expiredCouponsList: [], // 已过期优惠券列表
conditionsList: [], // 过滤条件列表
screenShow: false,
selCondition: '' // 被选择的优惠券条件
}
this.selConditionsItem = this.selConditionsItem.bind(this);
}
config = {
navigationBarTitleText: '我的优惠券'
}

componentWillMount () {
this.getCouponsList({
page: 1,
size: 20,
used: 0
})
}
getCouponsList(params) {
this.setState({
loading: true
})
WeApi.getCouponsList(params).then(res => {
if(res.data.code === 1) {
if(params.used && params.used === 1) {
let _usedCouponsList = [
...this.state.usedCouponsList,
...res.data.data
];
if(params.page === 1) {
_usedCouponsList = [...res.data.data];
}
this.setState({
loading: false,
isLast: res.data.last,
nowPage: params.page,
usedCouponsList: _usedCouponsList,
conditionsList: res.data.conditions
})
}else if(params.used && params.used === 2) {
let _expiredCouponsList = [
...this.state.expiredCouponsList,
...res.data.data
]
if(params.page === 1) {
_expiredCouponsList = [...res.data.data];
}
this.setState({
loading: false,
isLast: res.data.last,
nowPage: params.page,
expiredCouponsList: _expiredCouponsList,
conditionsList: res.data.conditions
})
}else {
let _couponsList = [
...this.state.couponsList,
...res.data.data
]
if(params.page === 1) {
_couponsList = [...res.data.data];
}
this.setState({
loading: false,
isLast: res.data.last,
nowPage: params.page,
couponsList: _couponsList,
conditionsList: res.data.conditions
})
}

}
})
}
handleClick (value) {
console.log(value)
this.setState({
current: value
}, () => {
if(value !== 2) {
this.getCouponsList({
page: 1,
size: 20,
used: value
})
}
})
}
showScreenModal() {
this.setState((prevState) => ({
screenShow: !prevState.screenShow
}))
}
selConditionsItem(item) {
this.setState({
selCondition: item
})
}
moreLoading() {
const { nowPage, selCondition, current, isLast } = this.state;
let page = nowPage + 1;
let params = {
page: page,
size: 20,
used: current,
title: selCondition
}
if(isLast) {
this.setState({
nowPage: page
})
this.getCouponsList(params)
}else {
Taro.showToast({
title: '已经是最后一页',
icon: 'none',
duration: 2000
})
}

}
resetCondition() {
this.setState({
selCondition: '',
screenShow: false
}, () => {
const { current } = this.state;
let params = {
used: current,
page: 1,
size: 20,
}
this.getCouponsList(params)
})
}
confirmCondition() {
const { current, selCondition } = this.state;
this.setState({
screenShow: false
})
let params = {
title: selCondition,
used: current,
page: 1,
size: 20,
}
this.getCouponsList(params)
}
render () {
const tabList = [{ title: '未使用' }, { title: '已使用' }, { title: '已过期' }]
const { current, couponsList, screenShow, usedCouponsList, expiredCouponsList, conditionsList, selCondition, loading } = this.state;
const imgHost = Taro.getStorageSync('imgHost');
const youhuiquan = imgHost + '/img/youhuiquan.png';
const screenBlack = imgHost + '/img/screen_black.png';
const screenBlue = imgHost + '/img/screen_blue.png';
return (




筛选



选择优惠券内容

{
conditionsList.map((item, index) => {
return (
{item}
)
})
}


重置
确定





{
couponsList.length > 0 ?
{
couponsList.map((item, index) => {
return (

)
})
}
: (!loading ?

暂无{tabList[0].title}优惠券
: null)
}


{
usedCouponsList.length > 0 ?
{
usedCouponsList.map((item, index) => {
return (

)
})
}

: (!loading ?

暂无{tabList[1].title}优惠券
: null)
}


{
expiredCouponsList.length > 0 ?
{
expiredCouponsList.map((item, index) => {
return (

)
})
}
: (!loading ?

暂无{tabList[2].title}优惠券
: null)
}











1.优惠码请在零零汽网站(www.007vin.com)或App(零零汽)上使用。


2.当您或他人购买或续费时,在订单页面可以选择(或输入)您的优惠码,获得相应的优惠。


3.每个订单限使用一个优惠码。


4.请注意:每个优惠码都有使用期限,请在期限之内使用,过期作废。


5.当您使用优惠码购买的商品发生退货时,将不会退还该优惠码对应的优惠金额。


6.订单享受某些特定的大力度促销优惠时,因为亏本销售,恕不支持使用优惠码。





)
}
}

export default Coupons

**期望行为**

该有的操作都可以继续操作,可是视图没有,想知道是什么原因
**报错信息**

iphone内表现
![1561704686244](https://user-images.githubusercontent.com/32010968/60323303-473f3b00-99b4-11e9-9183-be868ebdbcdf.jpg)
但实际需要的是
![1561704784700](https://user-images.githubusercontent.com/32010968/60323388-89687c80-99b4-11e9-9307-0336a29af38b.jpg)
at-tabs_Header没有相关视图
**系统信息**

**补充信息**

我不确定是不是position: fixed的原因,但是这边操作都没有问题,只是显示视图有问题

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.