java下拉刷新上拉加载_【Web】移动端下拉刷新、上拉加载更多插件

1

2

3

4

5

移动端下拉刷新、上拉加载更多插件

6

7

8

9

10

11 *{

12 margin:0;

13 padding:0;

14 -webkit-tap-highlight-color:rgba(0,0,0,0);

15 -webkit-text-size-adjust:none;

16 }

17 html{

18 font-size:10px;

19 }

20 body{

21 background-color:#f5f5f5;

22 font-size:1.2em;

23 }

24 .header{

25 height:44px;

26 line-height:44px;

27 border-bottom:1px solid #ccc;

28 background-color:#eee;

29 }

30 .header h1{

31 text-align:center;

32 font-size:2rem;

33 font-weight:normal;

34 }

35 .content{

36 max-width:640px;

37 margin:0 auto;

38 background-color:#fff;

39 }

40 .content .item{

41 display:-webkit-box;

42 display:-webkit-flex;

43 display:-ms-flexbox;

44 display:flex;

45 -ms-flex-align:center;

46 -webkit-box-align:center;

47 box-align:center;

48 -webkit-align-items:center;

49 align-items:center;

50 padding:3.125%;

51 border-bottom:1px solid #ddd;

52 color:#333;

53 text-decoration:none;

54 }

55 .content .item img{

56 display:block;

57 width:40px;

58 height:40px;

59 border:1px solid #ddd;

60 }

61 .content .item h3{

62 display:block;

63 -webkit-box-flex:1;

64 -webkit-flex:1;

65 -ms-flex:1;

66 flex:1;

67 width:100%;

68 max-height:40px;

69 overflow:hidden;

70 line-height:20px;

71 margin:0 10px;

72 font-size:1.2rem;

73 }

74 .content .item .date{

75 display:block;

76 height:20px;

77 line-height:20px;

78 color:#999;

79 }

80 .opacity{

81 -webkit-animation:opacity 0.3s linear;

82 animation:opacity 0.3s linear;

83 }

84 @-webkit-keyframes opacity{

85 0% {86 opacity:0;

87 }

88 100%{

89 opacity:1;

90 }

91 }92 @keyframes opacity{

93 0% {94 opacity:0;

95 }

96 100%{

97 opacity:1;

98 }

99 }100

101

102

103

104

105

就当我是新闻页吧

106