公告列表
公告列表
收藏
回答

安卓板和iphone 版显示样式不一致

安卓版文字view 显示在底部正常的，但是iphone 版文字view显示在顶部 ,微信开发者工具调试时也是在底部


js   wxss   wxml代码如下


//list.js
var md5Utils = require('../../utils/md5.js');
var app = getApp()
var number =1
var isLoading = false
Page({
    data: {
        arr_res: [],
        windowHeight: "500px",
        loadingHidden: true,
        lodingInfo: "加载更多",
        url:"../../pages/content/content"
    },
    onLoad: function(options) {
        //使number重置为0
        number = 1;
        console.log(options.listId);
        console.log(options.listName);
        var that = this;
        wx.getSystemInfo({
            success: function(res) {
                console.log(res.windowHeight + "px");
                that.setData({
                    windowHeight: res.windowHeight + "px"
                })
            },
            fail: function(e) {
                console.log("获取设备信息失败" + e);
            }
        });
 
        // 动态设置标题栏。。。无效
        wx.setNavigationBarTitle({
            title: options.listName,
            fail: function() {
                console.log("更改标题失败");
            },
            success: function() {
                console.log("更改标题成功");
            }
        });
        wx.request({
          url: app.globalData.globalUrl + "tdouroubaikenew/list",//20170806 add
            data: {
              'page': number,
              'limit': 20,
              'ke': this.options.listName,
            },
            header: {
              'token': app.globalData.token,
              'sign': md5Utils.hexMD5("page" + number + "limit20ke" + encodeURI(this.options.listName)+ app.globalData.token),
              'timestamp': Date.now(),
              'Content-Type': 'text/html;charset=UTF-8'
            },
            success: function(res) {
                number++;
                that.setData({
                  arr_res: res.data.page.list
                });
                console.log(that.data.arr_res);
            },
            fail: function(error) {
                console.log(error);
                that.setData({
                    request_fail: true,
                });
            }
        })
    },
    //滑到底部监听事件
    lower: function(e) {
        console.log(e);
        var that = this;
        if (number < 20 && !isLoading) {
            isLoading = true;
            that.setData({
                loadingHidden: false
            })
            wx.request({
              url: app.globalData.globalUrl + "tdouroubaikenew/list",//20170806 add
              data: {
                'page': number,
                'limit': 20,
                'ke': this.options.listName,
              },
              header: {
                'token': app.globalData.token,
                'sign': md5Utils.hexMD5("page" + number + "limit20ke" + encodeURI(this.options.listName) + app.globalData.token),
                'timestamp': Date.now(),
                'Content-Type': 'text/html;charset=UTF-8'
              },
                success: function(res) {
                  number++;
                    that.setData({
                        arr_res: that.data.arr_res.concat(res.data.page.list),
                        lodingInfo: "加载更多",
                    });
                    console.log(that.data.arr_res);
                },
                fail: function(error) {
                    // number--;
                    console.log(error);
                    that.setData({
                        lodingInfo: "加载失败",
                    })
                },
                complete: function() {
                    isLoading = false;
                    that.setData({
                        loadingHidden: true,
                    })
                }
            })
        }
    },
})
.view-request-fail{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.text-request-fail{
    font-size: 18px;
    color: rgb(85, 85, 85)
}
.main {
    display: flex;
    flex-direction: column;
}
 
.head {
    display: flex;
    flex-direction: row; 
    position: relative;
    width: 100%;
    height: 400rpx;
}
.img{
    position: absolute;
    width: 100%;
    height: 400rpx;
      
}
.title-view{
    position: absolute;
    align-self:  flex-end;
    width: 100%;
    height: auto;
    background-color: rgba(39, 174, 96,0.5)
}
.title{
    font-size: 18px;
    color: rgb(255, 255, 255);
    margin-left: 40rpx;
    opacity: 1.0
}
.titlet{
    
    font-size: 18px;
    color: gray;
    margin-left: 40rpx;
    opacity: 1.0
}
.text{
    display: flex;
    flex-direction: column;
    margin: 40rpx;
}
.line{
    display: flex;
    flex: 1;
    height: 2rpx;
    margin-top: 10rpx;
    /*background-color: #757575*/
    background-color: lightgray
}
<view class="view-request-fail" wx:if="{{request_fail}}">
    <text class="text-request-fail">网络或服务器错误，请检查网络...</text>
</view>
<view wx:if="{{!request_fail}}">
    <scroll-view scroll-y="true" bindscrolltolower="lower" style="height:{{windowHeight}};" lower-threshold="200">
        <navigator wx:for="{{arr_res}}" url="{{url}}?id={{item.id}}&name={{item.name}}">
            <view class="main">
                 <view class="head">
                      <image class="img" mode="aspectFill" src="{{item.pic}}" />
                      <view class="title-view">
                          <text class="title">{{item.name}}{{item.ename}}</text>
                      </view>
                  </view>
                   <!--<text class="titlet">{{item.name}}{{item.ename}}</text>-->
                  <view class="line" />
            </view>
        </navigator>
    </scroll-view>
    <loading hidden="{{loadingHidden}}">{{lodingInfo}}</loading>
</view>


回答关注问题邀请回答
收藏

1 个回答

  • Miaoo
    Miaoo
    2017-08-09

    反正是个title-view  bottom:0;top:auto;

    2017-08-09
    有用
    回复
请 登录 后发表内容
相关问题
相关文档